z-index

https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index

一、在 static 中

auto

元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。

<integer>

整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-index 进行对比。

二、当元素设置position为absolute,relative或者fixed,它们的层叠顺序大于position为static的。

三 、同一层级的 absolute ，会再进行 z-index 比较

<style>

    .div1 {  position: absolute;  background: red;  z-index: 100;  }

    .div2 { position: absolute; background: green;  z-index: 99;}

    .div3 {z-index: 101; background: blue; }

</style>

<div class="wrapper">

    <div class="div1">11111</div>

    <div class="div2">22222</div>

    <div class="div3">33333</div>

 </div>