Make a note of any holes you’ve stepped in

introduce

Sticky positioning: Sticky positioning can be thought of as a mixture of relative positioning and fixed positioning, with elements being relatively positioned before crossing a certain threshold and then fixed

#one { position: sticky; top: 10px; }Copy the code

Elements are positioned relative to each other until the viewport scrolls to the top less than 10px away. After that, the element will be fixed 10px from the top until the ViewPort is rolled back below the threshold.

So let’s talk about thatThe failure reason:

Let’s take a look at the support for sticky positioning properties in various browsers so far, as shown below:



In addition to compatibility problems, enumerate the situations where setting sticky positioning attribute fails:

one:

When setting sticky positioning, we must specify one of the four thresholds of top, right, bottom or left to make sticky positioning effective. Otherwise it behaves the same as relative positioning.

Second:

The parent element is not as tall as the child element. The parent element is usually set to height:100%.

Third:

The parent element setting overflow property also invalidates sticky positioning

The parent element is not only the parent element of the element line, but also any parent element that references the child component