定位：

定位的类型：

定位就是通过设置position属性的值来覆盖默认的布局方式。

静态定位：

position：static；默认值默认布局方式

相对定位：

position： relative；相对默认布局的位置进行定位，相对定位后的元素本身的文档流没有变化，其展示效果改变了（相对定位就是相对“自己的定位”也就是相对于没改变的文档流定位）。

    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <style>
        .box{
            height: 80px;
            width: 80px;
            border: 3px solid ;
        }
        .box2{
            position: relative;
            left: 80px;
        }
        .box3{
            position: relative;
            left: 160px;
        }
    </style>
<!--相对定位--!>

绝对定位：

position： absolute；绝对定位元素脱离正常文本流，相对于其定位上下文进行定位。多个相同的盒子设置相同的绝对定位会发生重叠。
当绝对定位元素为行内元素时获得与浮动类似的属性，宽度会收缩，可以设置宽高拥有了块级元素的属性。
在使用绝对定位的时候一定要设置好参考点，否则打不到我们所需的效果或者在没任何参考点的情况下绝对定位到html下，一般把父容器设置为参考点且一般设置position的值为relative；
为什么使用relative？
1. 在不设置top,bottom,left,right四者的情况下对于样式是没有影响的。
2. 不使用static的原因是，static没有参考点效果，无法达到预期目标。
3. 不使用absolute的原因绝对定位元素为行内元素时获得与浮动类似的属性，宽度会收缩，可以设置宽高拥有了块级元素的属性，会改变样式，打不到我们预期的效果；
4. 不使用fixed的原因是因为fixed会导致父元素固定定位，导致样式出现错误；
5. 目前来说，sticky也没出现问题，也是可以使用，但是不建议，以免后续产生不可估量的问题。

绝对定位的元素会覆盖普通文本流。

<div class="box1">1</div>
 <div class="box2">2</div>
 <div class="box3">3</div>
 <style>
     .box1, .box2, .box3{
         width: 50px;
         height: 50px;
         border: 2px solid black;
     }
     .box2{
         position: relative;      
         top: 10px;
         left: 10px;
         bottom: 200px;
     }
</style>
<!--绝对定位--!>

固定定位：

position：fixed；相对浏览器窗口进行定位，因此滚动产生的时候，固定元素依然处于窗口的某个固定位置。

粘性定位：

position：sticky;粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。兼容性较差，一般该效果使用js来编写。

对于大布局，自适应一般使用浮动，定位一般用于小元素，固定宽高等，具体使用还要结合实际情况。

z-index：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值，设置为负值的时候，可以使其在文本的后面出现。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
规则：当A的z-index大于B的z-index时，A的子类必定覆盖B的子类，无论二者的z-index值得大小。同层次的情况下谁z-index的值小谁就被覆盖。
用法：z-index：50；使用规律对比元素必须有参考点（参考点规则和absolute一样）。

        .box1{
            position: sticky;
            border: 3px solid;
            height: 90px;
            width: 90px;
            background: blue;
            z-index: 50;
        }
        .box5{
            border: 3px solid;
            height: 90px;
            width: 90px;
            background: green;
            z-index: 20;
        }