定位常用的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>

sticky.gif

定位不常用4种属性:

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

芹丸子
40 声望4 粉丝

所有文章都是自己的学习记录,如果对你有帮助我很荣幸,如果文章记录之处有什么不对不好的地方还请指教