一、z-index基础内容(入门)
1.z-index 含义
z-index属性指定了元素及其子元素的在 Z 轴上面的顺序,而在 Z 轴上面的顺序可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个
2.z-index 支持的属性值
- z-index:auto; 默认值
- z-index:int; 整数值
- z-index:inherit;继承父元素的z-index属性值
3.z-index的特性
- 支持负值
- 支持css3 animation动画
- 在css2.1时代,需要和定位元素配合使用
4.特殊点
如果不考虑css3 ,只有标记了定位元素position的z-index 才有作用,但是css3 中有例外
{
position:static;z-index:2;
}
{
position:relative;z-index:2;
}
{
position:absolute;z-index:2;
}
{
position:fixed;z-index:2;
}
{
position:sticky;z-index:2;
}
static:元素使用正常的布局行为,即元素在文档常规流中当前的布局位置
二、多个定位元素(应用)
1.如果定位元素z-index 没有嵌套
①后来居上的准则
②哪个大,哪个上
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
}
<div class="one">one</div>
<div class="two">two</div>
①后来居上 (即默认按照dom元素排列的先后顺序,靠后的dom元素排列居上)
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 2;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 1;
}
<div class="one">one</div>
<div class="two">two</div>
②哪个大,哪个上(当设置有z-index的时候,按照z-index的值排列,值越大,越靠上)
2. 如果定位元素z-index发生嵌套
①祖先优先原则
②特殊情况
.parent-one {
position: relative;
z-index: 2;
}
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 1;
}
.parent-two {
position: relative;
z-index: 1;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 2;
}
<div class="parent-one">
<div class="one">one</div>
</div>
<div class="parent-two">
<div class="two">two</div>
</div>
①祖先优先原则(当有外层包裹发生嵌套的时候,两个元素的层级比较依赖于祖先的z-index值大小)
.parent-one {
position: relative;
z-index: auto;
}
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 2;
}
.parent-two {
position: relative;
z-index: 1;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 1;
}
<div class="parent-one">
<div class="one">one</div>
</div>
<div class="parent-two">
<div class="two">two</div>
</div>
②特殊情况(当z-index的值为auto时,当前层叠上下文的生成盒子层叠水平为0,盒子(除非是根元素)不会创建一个新的层叠上下文,因此内层的z-index:2;起了作用)
三、理解css 中的层叠上下文和层叠水平(进阶)
1.概念
我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间(可高人一等)
哪些元素具有层叠上下文呢???
层叠水平:
层叠上下文中的每个元素都有一个层叠水平(stacjing level),决定了同一个层叠上下文中元素在z轴上的显示顺序。
遵循“后来居上”和“谁大谁上”的原则。
层叠水平必须放在层叠上下文中来看,层叠水平和z-index并不是一个概念。
3. 层叠水平:
①著名的7阶层叠水平(规范层叠,更符合页面加载的功能和视觉呈现)
为什么是这样的排序???
内容是页面中最重要的实体,所以,层叠水平高。
4. z-index 与层叠上下文:
①特性:
- 定位元素默认z-index:auto可以看成是z-index:0;
- z-index不为auto的定位元素会创建层叠上下文;
- z-index层叠顺序的比较止步于父级层叠上下文;
1)为何定位元素会覆盖普通元素?
.a{
}
.b{
margin-left:-30px}
此时,右边的元素覆盖左边的元素,满足了基本的元素后来居上原则。
.a{
position:relative} z-index?
.b{
margin-left:-30px}
如果z-index不做设置,当有定位属性的时候,默认为z-index:auto; 也就是z-index为0。而根据层叠水平规则,z-index:auto是在inline(图片)之上的,因此会反转覆盖。
3)z-index与创建层叠上下文:
.box{
position: absolute;
background: blue;
}
.img{
position: relative;
margin-left: -100px;
}
此时根据层叠水平规则, inline在block之上
.box{
position: absolute;
background: blue;
z-index:0;
}
.img{
position: relative;
margin-left: -100px;
z-index:-1;
}
box添加z-index:0的属性时,此时图片的层叠上下文元素就变成了容器,box的背景色(前提是具有容器的层叠上下文)会在img之下
④z-index受限于层叠上下文:
.box1{
position: relative;
z-index:0;
}
.box1 img{
position: absolute;
z-index:9999;
}
.box2{
position: relative;
z-index:1;
}
.box2 img{
position: absolute;
z-index: -1;
}
5.其他CSS属性与层叠上下文
- 文档根元素();
- position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;
- position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
- flex (flex) 容器的子元素,且 z-index 值不为 auto;
- grid (grid) 容器的子元素,且 z-index 值不为 auto;
- opacity 属性值小于 1 的元素(参见 the specification for opacity);
- mix-blend-mode 属性值不为 normal 的元素;
- 以下任意属性值不为 none 的元素:
- isolation 属性值为 isolate 的元素;
- will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章);
- contain 属性值为 layout、paint 或包含它们其中之一的合成值(比如 contain: strict、contain: content)的元素。
.box{
background:'blue';
}
.box>div {
z-index:1
}
.box>div>img{
position:relative;
z-index:-1;
}
<div class="box">
<div>
<img src="1.jpg" />
</div>
</div>
由于box不具有层叠上下文,因此img直接穿过box背景达到根元素的层叠上下文
.box{
display:flex;
background:'blue';
}
.box>div {
z-index:1
}
.box>div>img{
position:relative;
z-index:-1;
}
<div class="box">
<div>
<img src="1.jpg" />
</div>
</div>
这个并不能说是flex给box添加了层叠上下文而导致了这种情况,而是因为flex当前元素的子元素的z-index不为auto,因此让box具备层叠上下文。
6.z-index与其他CSS属性层叠上下文
①不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
②依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
四、z-index相关实践(实践)
1.最小化影响原则
目的:
避免z-index嵌套层叠关系混乱
原因:
1.元素的层叠水平主要是由所在的层叠上下文决定;
做法:
1.避免使用定位属性;
2.不犯二准则
目的:
避免z-index混乱,一山比一山高的样式问题。
原因:
多人协作以及后期维护。
做法:
对于非浮层元素,避免设置z-index值,z-index值没有任何道理需要超过2——不犯二准则。
3.组件层级计数器
目的:
避免浮层组件因z-index被覆盖的问题。
原因:
1.总会遇到意想不到的高层及元素;
2.组件的覆盖规则具有动态性;做法:
通过js获得body下子元素的最大z-index值
4.可访问性隐藏
概念:
人肉眼看不见,但是辅助设备可以识别。
做法:
使用z-index负值元素在层叠上下文的背景之上,其它元素之下。