<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: blue;
/* 使box具有层叠上下文属性 */
transform: scale(1);
}
.box >img {
position: relative;
z-index: -1;
right: -50px;
}
</style>
</head>
<body>
<!--
1. z-index为负值的显示:
当box具有层叠上下文属性时,img会显示在蓝色背景上;
当box不具有层叠上下文属性时; 蓝色背景会显示在img上;因为此时box是block元素;
-->
<!-- <div class="box">
<img src="./img/001.jpg" alt="">
</div> -->
<!--
2. z-index= auto/0的区别:
a. z-index=auto不创建层叠上下文,是普通元素; 所以直接比较img自身的z-index属性,大的先显示,
即001.jpg会覆盖在002.jpg图片上
b. z-index=0 会创建层叠上下文,所以此时比较的层叠规则发生了变化;
先比较父元素的层叠顺序,发现相同,再遵循后来居上的准则,002.jpg会显示再001.jpg的上面;
-->
<!-- <div style="position: relative;z-index: auto;">
<img src="./img/001.jpg" alt="" style="position: absolute;z-index: 2">
</div>
<div style="position: relative;z-index: auto;">
<img src="./img/002.jpg" alt="" style="position: absolute;z-index: 1;">
</div> -->
<!-- <div style="position: relative;z-index: 0;">
<img src="./img/001.jpg" alt="" style="position: absolute;z-index: 2">
</div>
<div style="position: relative;z-index: 0;">
<img src="./img/002.jpg" alt="" style="position: absolute;z-index: 1;">
</div> -->
<br>
</body>
</html>
元素分为普通元素和层叠上下文元素;
层叠上下文:层叠上下文元素才具有该属性;
层叠水平: 在同一个层叠上下文中,元素在Z轴方向上显示的顺序;每个元素都有层叠水平;
Z轴:指用户眼睛与屏幕上这条看不见的垂直线;
1. 层叠上下文显示准则
1). 谁大谁上:在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个;
2). 后来居上: 当元素的层叠水平一致,层叠顺序相同时,在DOM流中后面的元素会覆盖前面的元素;
2. z-index:auto和z-index: 0的区别:
z-index:auto不创建层叠上下文,是普通元素;
z-index:0 会创建层叠上下文,会导致层叠规则发生变化;
3. CSS3中对层叠上下文规则有影响的属性:
1)元素为flex布局元素(即父元素设置display: flex / inline-flex),且z-index的值不是auto
2) 元素的opacity不为1;
3)元素的tarnsform / transition 的值不为none;
4) 元素的 mix-blend-mode 的值不是 normal;
5) 元素的filter值不为 none;
6)元素的 isolation 值是 isolate
7) 元素的 -webkit-overflow-scrolling 设为touch;