css使用position: sticky;实现粘性布局

定位常用的4种属性如下：

{
//1.定位的默认值，没有定位，等同于标准流
 position:static;
 
 //2.相对定位，相对于元素自己一开始的位置，一般会给relative的父元素的子元素设置absolute（绝对定位）
 position:relative;
 
 //3.绝对定位，相对于离自己最近的定位父级（除了static定位）的定位
 position:absolute;
 
 //4.固定定位，相对于浏览器窗口进行定位，不会跟随页面的滚动，而滚动。
 position:fixed;
}

处于实验阶段的属性：

{
    //5.元素的表现为在跨越指定的阀值（top,bottom,left,right）之前(大于)是相对定位，之后（小于）是固定定位。
    position: sticky;
}
//该属性生效又一些限制，
//1.必须指定阀值才会生效，优先级 top > bottom , left > right;
//2.达到设定阀值，如果没有达到，大于阀值，显示为相对定位，如果到达阀值，且小于的情况显示为固定定位
//3.如果父元素设置overflow 就必须是visible，如果是hidden父容器也就没有办法滚动，所以sticky的元素也不会滚动
//4.sticky的任一父元素如果设置了定位则这个sticky元素是相对于父元素进行定位，不会相对于视口定位

使用示例如下：

//html
 

     

         

            导航1
         
         

            导航2
         
         

            导航3
         
     
 
 
 //css
  

定位不常用4种属性：

//说是position的属性，其实是css属性的关键字
//1.inherit规定从父元素继承position的属性，当然他的局限也不是只有position属性，可以用在任何html元素的css属性。
//2.initial意思是默认值，也是可以用在任何html元素的css属性上，不会继承父元素的属性。
//3.unset表示不设置position，也是可以用在其他的css属性上。