Viscous localization can be simply understood asrelativeandfixedA mix of layouts.

The basic concept

  • Flow box

    Refers to the size box of the closest scrollable element (the element whose overflow property value is not visible) to the sticky positioning element, or the browser window box if there are no scrollable elements.

  • Viscous constrained rectangle

    The parent element rectangle of the viscous layout element

features

  • When the viscous constraint rectangle in the visible range isrelativeOtherwise, isfixed
  • If a sticky positioning element is the same height as its parent element, the sticky positioning effect will not appear when scrolling vertically
  • Its positioning effect is completely limited to the parent elements. If the parent elementoverflowProperty is setscroll.auto.overlayValue, then the viscosity positioning will fail
  • Multiple paste location elements in the same container are offset independently and may overlap; Pasted positioning elements in containers that are next to each other will occupy the nest, crowding out the original elements and creating the effect of occupying the space in turn.

case

  • Case 1 (Understanding flow boxes and viscous Constrained rectangles)
<body>
    <div>
        <nav>navigation</nav>
    </div>
</body>
Copy the code
body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {  height: 200px;  margin-top: 50px;  border: solid deepskyblue;  width: 400px;  background-color: deepskyblue; } nav {  position: sticky;  top: 20px;  background: yellow;  height: 60px;  line-height: 60px; } Copy the code

So, if the height of the viscous positioning elements if equals the height of the parent element and sticky, viscous positioning elements in rectangular will not achieve the effect of viscous viscous constraints, as viscous constraint rectangular disappeared in the visible range, viscous positioning elements will also disappear together in visible range, the failure of the so-called effect.

  • Case 2 (Multi-element viscosity effect)
<body>
    <div>
        <nav>navigation</nav>
        <header>The head</header>
    </div>
</body> Copy the code
body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {  height: 200px;  margin-top: 50px;  border: solid deepskyblue;  width: 400px;  background-color: deepskyblue; } nav {  position: sticky;  top: 20px;  background: yellow;  height: 60px;  line-height: 60px; } header {  position: sticky;  top: 20px;  background: green;  height: 60px;  line-height: 60px;  display: block; } Copy the code

You can see that when there are two viscous elements inside a parent element, the viscous element behind it will overwrite the viscous element in front as it rolls.

However, if you set the yellow navigationz-index:20, green head settingz-index:19Then, the yellow will cover the green, instead of the original upstart effect. After all, when it comes to stickiness, the elements have the same effectposition:fixed.z-indexWill take effect.

Reference:

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…

This article was typeset using MDNICE

This article was typeset using MDNICE