其他属性
-
层叠水平:层叠上下文中的每一个元素都有一个层叠水平,决定了同一个层叠上下文中元素在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 不等于 1
transform: rotate(15deg); // 3.transform 不等于 none
mix-blend-mode: screen; // 4.mix-blend-mode: screen
filter: blur(5px); // 5.filter 不等于 none
isolation: isolate; // 6.isolation: isolate
position: 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
不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别;
依赖z-index值创建层叠上下文的情况: