z-index
2019-06-04 本文已影响0人
good__day
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>
