What to do if css3 sticky does not take effect

css3 sticky solution does not take effect: 1. The parent element cannot have overflow:hidden or overflow:auto attributes; 2. One of the four values ​​​​of top, bottom, left, and right must be specified; 3. The height of the parent element Cannot be lower than the height of the sticky element.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommendation: "css video tutorial"

sticky does not take effect for the following reasons:

• parent The element is set with overflow:hidden or overflow:auto

• No one of the four values ​​​​of top, right, bottom, and left is specified

• Parent The height of the element is less than the height of the sticky-positioned element

• The sticky attribute depends on the user's scrolling, switching between position:relative and position:fixed positioning.

• Element positioning is relative positioning before crossing a specific threshold, and fixed positioning thereafter.

The sticky attribute is only valid when the following conditions are met:

• The parent element cannot be overflow:hidden or overflow:auto attribute

• Must specify one of the four values ​​​​top, bottom, left, right, otherwise it will only be in relative positioning

• The height of the parent element cannot be lower than the height of the sticky element

The above is the detailed content of What to do if css3 sticky does not take effect. For more information, please follow other related articles on the PHP Chinese website!