Positioning

相关属性：position，z-index，top，right，bottom，left， clip （将被clip-path代替）
即比较常用的属性：position,z-index

---

position

主要属性：static absolute relative fixed

---

absolute(绝对定位)：

• 包裹性，破坏性（造成父类高度塌陷）

• 脱离文档流
  这样可以不影响其它元素，因此动画元素尽量作用在absolute之上

• 位置跟随
  脱离文档流之后，其位置还是在原先的位置，利用这个可以进行居中和边缘对齐效果；

    <style>
        .wrap{
            text-align: center;
        }
        img{
            position: absolute;
            margin:0px 0px 0px -300px;
        }
    </style>

        <div class="wrap">
            &nbsp;
            <img src="img/girl.jpg" alt="一个妹子">
        </div>

• 传统定位：

  • 给父容器设置relative然后用top,left,bottom,right进行定位

• 无依赖的定位

  • 利用absolute和margin进行定位，这样可以提高自适应性，相对包含块进行定位（不是父类）

• 拉伸效果

  • absolute + left right bottom top =0 实现满屏或者布局 拉伸 （配合：before实现模糊效果）

relative(相对定位)

• 遵循文档流

• 针对自身进行位置偏移

• 限制absolute

fixed

• 对象不会根据滚动条滚动，固定于窗口

---

z-index

• 仅对拥有定位属性的元素起作用
• 元素嵌套情况下以父元素为准（值不是auto）

• 理解七阶层叠顺序

  • 

  • 视频

  • 博客