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 necessarilyposition:fixedOnly any parent element of the target element is not setposition:relative | absolute | fixed | stickyIn the case of only withposition: fixedBehave the same. And when either parent element is setposition:relative | absolute | fixed | sticky, the target element is fixed relative to the parent element.



compatibility