z-index 与 css 定位属性
z-index 只对定位元素有作用。
{position:relative;z-index:2;}
{position:absolute;z-index:2;}
{position:fixed;z-index:2;}
{position:sticky;z-index:2;}
如果定位元素z-index没有发生嵌套：
- 后来居上；
- 哪个值大哪个在上；
如果定位元素z-index发生嵌套：
- 以祖先元素为标准(
z-index不为auto)
css 中的层叠上下文和层叠等级
层叠上下文是HTML元素中的一个三维概念，表示元素在z轴上距离人眼更近。
具有层叠上下文的元素：
- 页面根元素天生具有层叠上下文，称为“根层叠上下文”。
- z-index 值为数值的定位元素具有层叠上下文。
- 其它属性
层叠上下文中的每个元素都有一个层叠等级，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁值大谁在上”的层叠准则。
层叠等级(stacking level) 和 z-index 不是一个东西。普通元素也有层叠等级。
层叠等级是放在同一个层叠上下文中来进行比较的，不在同一个层叠上下文中没有意义。
层叠上下文的特性
- 层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
- 每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染时，只影响后代元素。
- 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。
层叠顺序
层叠顺序表示元素发生层叠时特定的垂直显示顺序。
7阶层叠等级(stacking level)
层叠等级的比较要在同一个层叠上下文中
看下面的例子：
.inline-block{
display:inline-block;
background:olive;
margin:-30px;
}
.block{
display:block;
background:green;
}
z-index 与层叠上下文
- 定位元素默认
z-index:auto可以看成是z-index:0；
为何定位元素会覆盖普通元素？
定位元素默认
z-index:auto，根据层叠顺序表z-index:auto是大于inline/inline-block的，所以定位后，就会覆盖普通元素。
- z-index 不为 auto 的定位元素会创建层叠上下文；
从层叠顺序上讲，
z-index:auto可以看成是z-index:0；
但从层叠上下文来讲，z-index:auto不会产生层叠上下文，z-index:0则会产生层叠上下文。
- z-index 层叠顺序的比较止步于父级层叠上下文；
其它具有层叠上下文的css属性
-
z-index值不为auto的子 flex 项(父元素display:flex|inline-flex)。
<div class="box">
<div class="d1">
<div class="d2"></div>
</div>
</div>
.box{
margin:100px;background:blue;
display:flex;
}
.d1{z-index:1;} /*这里的值不是auto，所以父元素添加flex后才有了层叠上下文*/
.d2{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素的
opacity值不是1。
<div class="box">
<div class="d1"></div>
</div>
.box{
margin:100px;background:blue;
opacity:0.5; /*opacity不为1产生层叠上下文*/
}
.d1{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素的
transform值不是none。
<div class="box">
<div class="d1"></div>
</div>
.box{
margin:100px;background:blue;
transform:rotate(15deg); /*任意非none值*/
}
.d1{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素
mix-blend-mode值不是normal。
- 元素的
filter值不是none。
- 元素的
isolation值是isolate。
-
position:fixed声明。
-
will-change指定的属性值为上面任意一个。
- 元素的
-webkit-overflow-scrolling设为touch。
-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果.
-
auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 -
touch使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
z-index 与其它 css 属性层叠上下文的关系
- 不支持z-index即上面的9中css属性的层叠上下文元素的层叠顺序均是
z-index:auto级别。 - 依赖z-index的层叠上下文元素的层叠顺序取决于z-index的值。
依赖z-index值创建层叠上下文的情况：
-
position值为relative/absolute或fixed(部分浏览器)。 -
display:flex|inline-flex容器的子flex项。
z-index 最佳实践
- 最小化影响原则
- 避免使用定位属性
- 定位属性从大容器平级分离为私有小容器
- 不犯二准则
- 对于非浮层元素，避免设置 z-index 值，灵活应用层叠顺序、后来居上、层叠上下文等技巧。
- z-index 值没有任何道理需要超过2
- 组件层级计数器
- 通过js获取body下子元素的最大z-index值
- 可访问性隐藏
- 利用z-index负值元素在层叠上下文的背景之上，其它元素之下，达到隐藏不可见效果。
