position: sticky failure and solutions: 1. It must be used with top or bottom, otherwise it will not take effect; 2. The parent container cannot set properties that affect positioning such as overflow: hidden or transform; 3. Positioning is relative to the nearest scrollable ancestor element; 4. It is often used in scenarios such as navigation bar ceiling, table fixed columns, sidebar follow-up; 5. The behavior is similar to that of relative and fixed, and the stacking order is determined by the HTML structure.

position: sticky is a special way of positioning in CSS, which allows elements to "stick" at a certain position when scrolling the page. It sounds simple, but there are several key points to be paid attention to when using it, otherwise it will easily fail.

1. Sticky needs to be used with top / bottom

Just writing position: sticky is useless, you must specify top , bottom , or both. For example, if you want a navigation bar to be fixed when scrolling to the top, you can write it like this:

 .navbar {
  position: sticky;
  top: 0;
}

This means that when the element scrolls to the 0px position at the top of the viewport, it will "stuck" and no longer scrolls out of view with the page.

Note: If you do not set top or bottom , sticky will not take effect.

2. The parent container cannot be overflow: hidden

This is a place where many people rush to the pit. If the parent of a sticky element has properties such as overflow: hidden , overflow-x: hidden , or transform , sticky may not work at all.

For example, in the following case, .box has overflow: hidden , and .sticky inside will not sticky:

 <div class="box">
  <div class="sticky">This sticky will be invalid</div>
</div>

 .box {
  overflow: hidden;
}

.sticky {
  position: sticky;
  top: 0;
}

Therefore, when using sticky, make sure that its ancestor elements do not affect the positioning style.

3. Sticky is relatively close to the scrolling ancestor position

The positioning of sticky is calculated relative to the nearest scrollable ancestor element (that is, the parent container with scrolling behavior).

For example, if you put a sticky element in a div with a scrollbar, it will work in that local scrolling area, not the entire page.

4. Common uses and examples

• Navigation bar ceiling: The most common usage, keeping the navigation visible when the user scrolls the page.
• Table column/row fixed: Fix certain columns when scrolling a table horizontally or vertically.
• Sidebar Follow: "stick" somewhere as the page scrolls, suitable for directory navigation.

 .sidebar {
  position: sticky;
  top: 20px; /* 20px from top to start fixed*/
}

5. Some small details

• The Sticky element behaves like a combination of relative and fixed: it behaves like relative before the set top or bottom value is reached; once the condition is triggered, it is fixed to the screen like fixed .
• Sticky can also be used normally in flex or grid layouts.
• If multiple sticky elements overlap, their stacking order is determined by the HTML structure, and the following elements are covered on the front by default.

Basically that's it. By mastering these key points, you can use position: sticky correctly in most scenarios.

The above is the detailed content of How does position: sticky work?. For more information, please follow other related articles on the PHP Chinese website!