z-index 使用注意

z-index 在日常开发中经常使用，所以将一些使用注意事项在这里整理一下。

定义和用法：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

使用说明：

1. Z-index 仅能在定位元素上奏效（position: relative | absoluet | fixed）

原因： 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

2. 从父原则，父元素的z-index的值决定它与子元素的显示层级

例如： 即使第二个盒子内部的子元素设置z-index为999，也是显示在下面

      <style>
        .a{
          position: absolute;
          z-index: 2;
        }
        .b{
          position: absolute;
          left: 30px;
          top: 30px;
          z-index: 1;
        }
        p{
          width: 100px;
          height: 100px;
        }
        .p1 {
          z-index: 3;
          background-color: red;
        }
        .p2 {
          z-index: 999;
          background-color: yellow;
        }
      </style>

      <div class="a">
          <p class="p1">123</p>
      </div>
      <div class="b">
          <p class="p2">345</p>
      </div>

展示如下：

z-index使用注意

• 1.使用对象需设置position 非 static

• 2.使用对象的父元素的z-index会先进行比较,所以使用的适合注意父盒子的z-index

• 3.弹框记得一定要放在最外层，这样层级不会受父元素影响

• 4. z-index使用时需要注意，不能随意设置。因为 z-index比较低的元素被提升为单独图层之后，层叠在它上面的的元素统统都会被提升为单独的图层，可能会增加上千个图层，大大增加内存的压力，甚至直接让页面崩溃。这就是层爆炸的原理。