乐趣区

关于前端:css使用position-sticky实现粘性布局

jiezi

定位罕用的 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
 <div class="container">
     <ul>
         <li>
            <span> 导航 1 </span>
         </li>
         <li>
            <span> 导航 2 </span>
         </li>
         <li>
            <span> 导航 3 </span>
         </li>
     </ul>
 </div>
 
 //css
  <style>
     .container {
         width: 50vw;
         margin: 0 auto;
     }
     .container ul {
         width: 100%;
         margin: 0 auto;
     }
     .container ul li {
         height: 400px;
         width: 100%;
         overflow: visible;
     }
     .container ul li span{
         display: block;
         height: 40px;
         background-color: pink;
         position: -webkit-sticky;
         position: sticky;
         top: 20px;
     }
     .container ul li:last-child {margin-bottom: 1000px;}
 </style>

定位不罕用 4 种属性：

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