What are the characteristics of sticky attribute in css

This article mainly introduces the characteristics of the sticky attribute in css, which is very detailed and has a certain reference value. Friends who are interested must read it!

Description

1. This element does not deviate from the document stream and still retains its original position in the document stream.

2. When the element scrolls in the container beyond the specified offset value, the element is fixed in the specified position of the container.

That is, if you set top:50px, when the sticky element reaches the position of the 50px at the top of the relative positioning element, it is fixed and no longer moves up.

3. The relative offset of a fixed element is relative to the ancestor element with a scroll box that is closest to it.

If the ancestor element cannot be scrolled, the offset of the element is calculated relative to viewport.

Example

Demohtml,body {margin: 0 center;background-color padding: 0;} .fixed {line-height: 40pxash display: flex;position:-webkit-sticky;position: sticky;/* compatible * / top: 0 center;background-color left: 0;} .fixed li {flex: 1 center;background-color: center;background-color: # 61b0ef;} ul {padding: 0;} li {list-style: none } Line 1, row 2, row 3, row 4, tab1tab2tab3tab4, row 1, row 2, row 3, row 4, row 3, row 4, row 4, row 2, row 3, row 4, row 3, row 4, row 3, row 3, row 4, row 4, row 3, line 3, line 4, line 2, line 2, line 4, line 2, line 2, line 4, line 2, line 4, line 3, line 3, line 4, line 2, line 3, line 4, line 2, line 3, line 4, line 4, line 3, line 3, line 4, line 3, line 4, line 2 Line 4, line 4, line 1, line 2, line 3, line 3, line 4, line 2, line 3, line 3 is all the contents of the article "what are the characteristics of the sticky attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!