Home>
The following sites
Where
When it becomes a smartphone size, a reserved is displayed in the header part.
<p><span>Ota Medical Mall Dental</span><i></i>Reservations/Inquiries</p>
I want to follow this when scrolling,
The following site
https://www.miso.blog/css-position-sticky/
.sticky {
postion: -webkit-sticky;
position: sticky;
top: 0;
}
I added this to CSS and HTML, but it is not reflected.
I am using Mac OS 10.13.6 Chrome to issue developer tools and check on the smartphone screen.
I don't know what is causing it, so please let me know.
-
Answer # 1
Related articles
- html - with position: absolute;and right: 0;, the element disappears
- html - the element of position: absolute moves&disappears (with image)
- i want to change the position of the canvas element created by html2canvas
- html - why is the width of the block element made position absolute not the same as the parent element?
- html - why does the position of the element shift to the left when display: flex;is specified?
- html - the position of the characters in the list (li) is misaligned
- html - thank you for applying css in the input element
- html - about fixing the position of buttons and arrows
- html - position characters overlap
- html - i want to further fix the top/bottom inside the element fixed by the modal window with css
- html - i want to attach an icon to the element specified by the selector with the after element
- html - i want to center the label element in the tab menu
- html - i want to correct the position of headings
- html - about position: absolute;
- html - after clicking on an element, i want to delete it and display the new class
- html - i want the text input to be in the middle of the box position
- html - fixed position of border-bottom
- html - when multiple pseudo elements are used in the same element
- html - width of child element does not reach 100%
- html - i want to remove the specific child element from the padding applied to the parent element
Related questions
- html - i want to realize responsive tables and character fonts
- css3 : How to round the edges of a table (border-radius)
- html : Transparent text on mouseover
- html - adjusting the position of dl and dd elements
- html : No padding applied, element extends outside of container, font sizes do not match layout
- html : Input type search how to remove the cross? [closed]
- css, html, reactjs
- html - i want to unify the image size with css, but it sticks out
- When the page is resized, the content slides off the sides of HTML + CSS
- html : Flex div horizontal table scrolling
sticky is fixed in the parent element.
In the case of a question, since the height of the parent element is not specified, it becomes the same as the sticky element,
Even if you scroll, it will scroll with the parent element.
If you set the height of the parent element as shown below, it will be fixed even if the parent element scrolls.
If you want to fix regardless of the parent element, specify
position: fixed;
.I think the following explanation about sticky is cheap.
position: sticky;explains how it works and how to use it | Collis