CSS Sticky positioning Position: sticky

Position :sticky is a new attribute for CSS positioning. It can be said that the combination of relative positioning and fixed positioning; It is mainly used to monitor scroll events; In simple terms, in the sliding process, when the distance between an element and its parent reaches the sticky sticky positioning requirement (for example, top: 100px); Position :sticky

#stickyBox{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
Copy the code

Set position:sticky at the same time to one of (top,bottom,right,left)

  1. Parent elements (including ancestor elements) cannot have overflow:hidden or overflow: Auto attributes.
  2. You must specify one of the four values top, bottom, left, or right. otherwise, you are in a relative position
  3. The height of the parent element cannot be lower than that of the sticky element
  4. The sticky element is valid only within its parent element