How to set sticky positioning in css

How to set sticky positioning in css: Just write [position:sticky] directly in the css selector. Sticky positioning can be thought of as a hybrid of relative and fixed positioning, where an element is relatively positioned until it crosses a certain threshold and then becomes fixed.

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

(Learning video sharing: css video tutorial)

How to set sticky positioning in css:

Selection in css Just write position:sticky directly in the container.

Sticky positioning can be thought of as a hybrid of relative positioning and fixed positioning. Elements are relatively positioned until they cross a certain threshold, and then fixedly positioned. This specific threshold refers to one of top, right, bottom or left. In other words, sticky positioning can only take effect by specifying one of the four thresholds top, right, bottom or left. Otherwise the behavior is the same as relative positioning.

There is a concept of "flow box" in sticky positioning, which refers to the size box of the nearest scrollable element (the element whose overflow attribute value is not visible) of the sticky positioning element. If there is no scrollable element, represents the browser window box.

Just write position:sticky directly in the css selector. No examples will be given. The main points are to emphasize the following points:

1. The position of the sticky element is only relative to the first one. A parent block element with scrolling mechanism (an element with overflow set to overflow/scroll/auto/overlay) is positioned instead of the parent block element. codepen example

2. It will only work when the corresponding direction (top/right/bottom/left) is set, and can be superimposed on each other, and four directions can be set at the same time.

3. Even if position: sticky is set, it can only be displayed in the content area of ​​the parent block element. It cannot exceed this area unless you set a negative value.

4. Position: sticky will not trigger bfc. Simply put, float elements will not be calculated when calculating height.

5. When position on: sticky is set, the internal positioning will be relative to this element (codepen example)

6. Although position: sticky behaves like relative or fixed, so it is also Their level can be set via z-index. When the sibling nodes behind this element will cover this element, the level can be adjusted through z-index. (codepen example)

7. If the parent element of a sticky layout element is within the visible range, the layout of the element is relative, otherwise, it is fixed.

Related recommendations: CSS tutorial

The above is the detailed content of How to set sticky positioning in css. For more information, please follow other related articles on the PHP Chinese website!