How CSS uses position:sticky to implement sticky layouts

This article mainly introduces the CSS using Position:sticky to achieve sticky layout of the relevant information, content is very good, and now share to everyone, but also for everyone to do a reference.

Brief introduction

Generally know the following several commonly used:

{position:static;position:relative;position:absolute;position:fixed;}

The following three values are also mentioned in Https://developer.mozilla.org/zh-CN/docs/Web/CSS/position:

/* Global value */position:inherit;position:initial;position:unset;

Most of the estimates are not used position:sticky . This attribute value is still in the experimental phase. How do you describe it?

First Glimpse of Position:sticky

Sticky English literally means sticking and pasting, so let's call it sticky positioning. The following is to understand the experimental value of the specific functions and practical scenarios.

This is a combination of the position:relative and position:fixed two positioning functions in one of the special positioning, suitable for some special scenes.

What is the combination of two positioning functions?

The element is positioned first according to the normal document flow, and then relative to the flow root (BFC) and containing block (the nearest block-level ancestor element) of the element in the stream.

Then, the element positioning behaves as relative positioning before crossing a certain threshold, followed by fixed positioning.

This particular threshold refers to one of top, right, bottom, or left, in other words, one of the four thresholds that specify top, right, or bottom, to make the sticky positioning effective. Otherwise, the behavior is the same as relative positioning.

sticky: Objects follow regular flow when they are normal. It's like a relative fit fixed , and when it's on the screen, it's formatted like a regular stream, and when it's scrolled off the screen it behaves as fixed. The performance of this property is the adsorption effect you see in reality.

Common scenario: When the element is greater than 0px from the page viewport (Viewport, which is the reference to fixed positioning), the element is relative positioned to behave, and when the element is less than 0px from the page viewport, the element is fixed positioned at the top.

Code:

{    position:-webkit-sticky;    Position:sticky;    top:0;}

such as the way of expression:

From the top of 大于20px the page, shown as position:relative ;

From the top of 小于20p the page x, shown as position:fixed ;

Use to position:sticky implement the head navigation bar to secure

HTML code:

<p class= "Con" > <p class= "Samecon" > 
CSS code:

. Samecon h2{    position:-webkit-sticky;    Position:sticky;    top:0;    Background: #ccc;    padding:10px 0;}
Similarly, the side navigation bar can be implemented beyond the fixed.

Effective rules


 

 
  

  
One of top, right, bottom 或 left the four thresholds must be specified for the sticky positioning to take effect. Otherwise, the behavior is the same as relative positioning.
 
  
 
   
 
    
And at the same time set, the priority is high  top   bottom top , left and  right the priority is left  high when it is set at the same time.
 
   
 
  
 
  

  
The property of any parent node that is set as an position:sticky element  overflow must be visible , otherwise position:sticky 不会生效 . Here's what you need to explain:
 
  
 
   
 
    
If position:sticky the element's arbitrary parent position is set to  overflow:hidden , the parent container cannot scroll, so position:sticky  the element will not have a scrolling and then fixed condition.
 
    
If position:sticky  the element's arbitrary parent position is set to  position:relative | absolute | fixed , the element is positioned relative to the parent element and not relative to the  viewprot  position.
 
   
 
  
 
  

  
The set threshold is reached. This is a good understanding, that is,  position:sticky the set of elements to show relative  fixed whether or not the elements have reached the set threshold value to determine. Compatibility

 


 

  
 The 
 
  

    compatibility of this property is not very good, is still an experimental property, is not the recommended standard. 
  

 
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!