CSS3笔记之定位篇（二）z-index

知识点1：z-index基础

z-index：auto; 默认值
z-index: <integer> 整数
z-index: inherit 继承
不考虑css3 还有定位元素的z-index才有作用

知识点2：z-index与定位元素

无嵌套：后来居上，哪个大哪个上

//在没有添加z-index属性时，如果两个图片有重叠，默认为图片2覆盖图片1   “后来居上”
//如果添加了z-index，则那个元素的z-index值大，那个在最上面    “哪个大哪个上”
<img src="图片1" style="position: relative; z-index: 2">
<img src="图片2" style="position: absolute; z-index: 1">

有嵌套：祖先优先原则（z-index: 数字）

//虽然图片1的z-index大于图片2的z-index,但是对于嵌套的定位元素z-index遵循祖先优先原则，所以图片2优先显示
<div style="position: relative; z-index: 1"> //祖先元素的z-index不能为auto<img src="图片1" style="position: relative; z-index: 2">      
</div>
<div style="position: relative; z-index: 1"> //祖先元素的z-index不能为auto<img src="图片2" style="position: absolute; z-index: 1">      
</div>

知识点3：层叠上下文（stacking-context）和层叠水平（stacking-level）（重要）

层叠上下文：

页面根元素天生具有层叠上下文，称之为“根层叠上下文”

z-index值为数值的定位元素也具有层叠上下文

其他属性

层叠水平：层叠上下文中的每一个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序
层叠水平和z-index不是一个东西，普通元素也有层叠水平。
层叠上下文的特性：

层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

知识点4：层叠顺序（stacking-order）
background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block
--> z-index:auto或z-index:0 --> 正z-index

知识点5：z-index与层叠上下文

定位元素默认z-index:auto可以看成z-index:0
z-index不为auto的定位元素会创建层叠上下文
z-index层叠顺序的比较止步于父级层叠上下文

知识点6：其他css属性与层叠上下文

能创建层叠上下文的的css属性

<div class="box"><div><img src="logo.jpg"></div>
</div>
<style>.box {display: flex;                     // 1.display: flex 与子元素z-index不为auto 配合使用background:blue}.box > div {z-index: 1}.box > div > img {position: relative; z-index: -1;}
</style><div class="box"><img src="" alt="">
</div>
<style>.box {background:blue;opacity: .5;                       // 2.opacity 不等于 1transform: rotate(15deg);          // 3.transform 不等于 nonemix-blend-mode: screen;            // 4.mix-blend-mode: screenfilter: blur(5px);                 // 5.filter 不等于 noneisolation: isolate;                // 6.isolation: isolateposition: fixed;                   // 7.position: fixed Chrome等bink/webkit内核的浏览器使用will-change: transform;            // 8.will-change: transform-webkit-overflow-scrolling: touch  // 9.移动端}.box > div > img {position: relative; z-index: -1;}
</style>

知识点7：z-index与其他css属性层叠上下文

background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block
--> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index