The effect of suction a top
Common scenario
scroll
position: fixed
position
{
position: static;
position: relative;
position: absolute;
position: fixed;
}Copy the code
{
position: inherit;
position: initial;
position: unset;
}Copy the code
position: sticky
Viscous positioning is a mixture of relative positioning and fixed positioning. The element is positioned relative before crossing a specific threshold, and then fixed
position
position: sticky
experimental
position: sticky
top
- Similarities:
- Difference:
top
0
top
30px
top
Viscous positioning is a mixture of relative positioning and fixed positioning. The element is positioned relative before crossing a specific threshold, and then fixed.
top
Right, left, bottom
- Viscous positioningThe fixed positioning of is not necessarily
position:fixed
Only any parent element of the target element is not setposition:relative | absolute | fixed | sticky
In the case of only withposition: fixed
Behave the same. And when either parent element is setposition:relative | absolute | fixed | sticky
, the target element is fixed relative to the parent element.
compatibility