CSS深入理解之z-index_"style=\"position:absolute;z-index:2"-程序员宅基地

技术标签： z-index html

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之z-index

Z-index

一、Z-index基础

1、z-index属性指定了元素及其子元素的z顺序，而z顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较小z-index值的元素。

2、属性值：

（1）z-index:auto; 默认值

（2）z-index:<integer>; 整数值

（3）z-index:inherit; 继承

3、基本特性

（1）支持负值；

（2）支持CSS3 animation动画；

（3）在CSS 2.1时代，需要和定位元素配合使用。如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！

二、z-index与CSS定位属性

1、重点：z-index只对定位元素有作用。position:relative/absolute/fixed/sticky;时z-index有效。

2、如果定位元素z-index没有发生嵌套：

（1）后来居上的准则；

（2）哪个大，那个上。

3、如果定位元素z-index发生嵌套：

（1）祖先优先原则，前提：祖先z-index值是数值，非auto！

后来者居上，第二个在上层

<body>
	<div style="position:relative;z-index:1;">
		<img src="1.png" style="position:absolute;z-index:2;">
	</div>
	<div style="position:relative;z-index:1;">
		<img src="1.png" style="position:relative;left:100px;z-index:1;">
	</div>
</body>

第一个祖先元素z-index:auto，第一个在上层。CSS2.1：（z-index:auto）当前层叠上下文的生成盒子层叠水平是0，盒子（除非是根元素）不会创建一个新的层叠上下文。

<body>
	<div style="position:relative;z-index:auto;">
		<img src="1.png" style="position:absolute;z-index:2;">
	</div>
	<div style="position:relative;z-index:1;">
		<img src="1.png" style="position:relative;left:100px;z-index:1;">
	</div>
</body>

三、CSS中层叠上下文和层叠水平

1、层叠上下文（stacking context）

层叠上下文（stacking context）是HTML元素中的一个三维概念，表示元素在z轴上有了“可以高人一等”。

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

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

2、层叠水平（stacking level）

层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁在上层”的层叠准则。

层叠水平和z-index不是一个东西。普通元素也有层叠水平。

3、层叠上下文几个特性：

层叠上下文可以嵌套，组合成一个分层次的层叠上下文；

每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素；

每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

四、元素的层叠顺序

1、层叠顺序（stacking order）

层叠顺序（stacking order）是指元素发生层叠时有着特定的垂直显示顺序。

层叠顺序的意义：规范元素重叠时候的呈现规则。

为何层叠顺序是这样的？：更符合页面加载的功能和视觉呈现！一般来讲，background和border是装饰页面的，block和float是页面布局，而inline大部分是页面内容。内容是页面最重要的实体，因此层叠水平要高！

<style type="text/css">
	.inline-block,.block{width:200px;height:100px;color:#fff;}
	.inline-block{display:inline-block;background-color:olive;margin:-30px;}
	.block{display:block;background-color:green;}
</style>
<body style="padding:50px;">
	<div id="" class="inline-block">inline-block</div>
	<div id="" class="block">block</div>
</body>

背景色覆盖是层叠顺序，文字覆盖是后来居上。如果元素的 display 水平一样且五特殊属性，发生层叠的时候，后面的覆盖前面的，所以文字覆盖。

五、z-index与层叠上下文

1、z-index的实际行为表现

（1）定位元素默认z-index:auto可以看成z-index:0；

（2）z-index不为auto的定位元素会创建层叠上下文；

（3）z-index层叠顺序的比较止步于父级层叠上下文；

2、为何定位元素会覆盖普通元素？

（1）若无定位，元素遵循后来者居上原则

<style type="text/css">
	img{width:200px;}
</style>
<body>
	<img src="1.png">
	<img src="1.png" style="margin-left:-80px;">
</body>

（2）将第一个图片relative定位，则定位元素覆盖普通元素

<style type="text/css">
	img{width:200px;}
</style>
<body>
	<img src="1.png" style="position:relative;">
	<img src="1.png" style="margin-left:-80px;">
</body>

此时第一个图片的z-index值是auto（定位元素未设置z-index是默认为auto），可以看成z-index:0，层叠顺序大于图片这个inline水平元素，所以会覆盖。

3、z-index与创建层叠上下文

（1）

<style type="text/css">
	.box{position:absolute;background:blue;}
	img{position:relative;width:200px;margin:50px 50px 50px -50px;}
</style>
<body style="margin:100px;">
	<div id="" class="box">
		<img src="1.png" style="">
	</div>
</body>

（2）图片添加z-index:-1，背景覆盖图片。

<style type="text/css">
	.box{position:absolute;background:blue;}
	img{position:relative;width:200px;margin:50px 50px 50px -50px;z-index:-1;}
</style>
<body style="margin:100px;">
	<div id="" class="box">
		<img src="1.png" style="">
	</div>
</body>

（3）给容器添加z-index:0，图片在上层。

<style type="text/css">
	.box{position:absolute;background:blue;z-index:0;}
	img{position:relative;width:200px;margin:50px 50px 50px -50px;z-index:-1;}
</style>
<body style="margin:100px;">
	<div id="" class="box">
		<img src="1.png" style="">
	</div>
</body>

原因是z-index负值的层叠顺序在层叠上下文元素背景色之上。

第二步给图片设置z-index:-1时，容器绝对定位只是一个普通元素，不具有层叠上下文，所以图片的层叠上下文元素是页面根元素。但是，一旦容器z-index值为数值（第三步），图片的层叠上下文就变成了容器。定位元素的z-index不是auto的时候，就会创建层叠上下文。于是图片就在背景色上显示了。

从层叠顺序上讲，z-index:auto可以看成z-index:0。但从层叠上下文来讲，两者有着本质差异，auto不会创建层叠上下文，z-index:0会创建层叠上下文。（IE7下auto也会创建层叠上下文）

4、z-index受限于层叠上下文

<style type="text/css">
	.box1{position:relative;z-index:0;}
	.box1 img{position:absolute;z-index:9999;width:200px;}
	.box2{position:relative;z-index:1;left:100px;}
	.box2 img{position:absolute;z-index:-1;width:200px;}
</style>
<body>
	<div class="box1">
		<img src="1.png">
	</div>
	<div class="box2">
		<img src="1.png">
	</div>
</body>

虽然第一个图片的z-index值远远大于第二个图片，但他们的容器均为定位元素且z-index值为数值，会创建层叠上下文，第二个容器的z-index值更大，所以第二个图片覆盖了第一个图片。所以说z-index受限于层叠上下文。

六、其他CSS属性与层叠上下文

1、其他参与层叠上下文的属性们

（1）z-index值不为auto的flex项（父元素display:flex|inline-flex）；

（2）元素的opacity值不是1；（元素透明度不是1）

（3）元素的transform值不是none；

（4）元素mix-blend-mode值不是normal；（混合模式）

（5）元素的filter值不是none；（滤镜为none）

（6）元素的isolation值是isolate；（元素是孤立的）

（7）position:fixed声明；（部分浏览器）

（8）will-change指定的属性值为上面任意一个；

（9）元素的-webkit-overflow-scrolling设为touch。（移动端）

图一图二

因为box不是层叠上下文元素，图片在根元素（第一个层叠上下文元素）的上面，显示结果为图一。

2、display:flex与层叠上下文

<style type="text/css">
	.box{background:blue;display:flex;}
	.box>div{z-index:1;}
	.box>div>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<div id="" class="">
			<img src="1.png">
		</div>
	</div>
</body>

当我们给box设置display:flex时，box成为层叠上下文元素，显示结果为图二。Box成为层叠上下文元素并不是因为给box设置display:flex，而是因为子元素的z-index值不为auto。

3、透明度opacity不为1与层叠上下文

<style type="text/css">
	.box{background:blue;opacity:0.5;}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

当我们给box设置opacity:0.5;时，box成为层叠上下文元素，显示结果为图二。

4、transform值不为none与层叠上下文

<style type="text/css">
	.box{background:blue;transform:rotate(15deg);}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

为box设置transform:rotate(15deg);后，box成为层叠上下文元素，显示结果如图所示。

5、混合模式mix-blend-mode值不为normal与层叠上下文

<style type="text/css">
	.box{background:blue;mix-blend-mode:screen;}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

为box设置mix-blend-mode:screen;后，box成为层叠上下文元素，图片显示在上层。

6、filter值不为none与层叠上下文（CSS3特有的滤镜）

<style type="text/css">
	.box{background:blue;filter:blur(5px);}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

为box设置filter:blur(5px);模糊5像素后，box成为层叠上下文元素，图片显示在上层。效果如图所示。

7、isolation:isolate与层叠上下文

<style type="text/css">
	.box{background:blue;isolation:isolate;}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

当我们给box设置isolation:isolate;时，box成为层叠上下文元素，显示结果为图二。

8、position:fixed与层叠上下文

<style type="text/css">
	.box{background:blue;position:fixed;}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

当我们给box设置position:fixed;时，box成为层叠上下文元素，显示结果为图二。（只在Chrome等blink/webkit内核浏览器）（Firefox也可以）

9、will-change与层叠上下文

<style type="text/css">
	.box{background:blue;will-change:transform;}
	.box>img{position:relative;margin:50px 50px 50px -50px;z-index:-1;width:200px;}
</style>
<body style="padding-left:100px;">
	<div class="box">
		<img src="1.png">
	</div>
</body>

当我们给box设置will-change:transform;时，box成为层叠上下文元素，显示结果为图二。

七、z-index与其他CSS属性层叠上下文

1、不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；

2、例子

图片1-5,依次为最底层到最上层。img1是inline水平元素；img2，img3，img4，img5为不依赖z-index的层叠上下文元素，同级别遵循后来者居上原则，img5覆盖umg4覆盖umg3覆盖umg2；

3、依赖z-index的层叠上下文元素的层叠顺序取决于z-index值

（1）依赖z-index值创建层叠上下文的情况：

a、position值为relative/absolute或者fixed（部分浏览器）

b、display:flex|inline-flex容器的子flex项

（2）例子

<style type="text/css">
	.a{position:absolute;z-index:1;}
	.box{background:blue;display:flex;margin-left:200px;}
	.box>img{z-index:1;margin:50px 50px 50px -50px;}
</style>
<body style="padding-left:100px;">
	<img src="1.png" class="a">
	<div class="box">
		<img src="1.png">
	</div>
</body>

两个图片的z-index值都为1，同一个层叠水平，第二个图片覆盖第一个，遵循后来者居上原则。

若将flex图片的z-index值改为-1，display:flex元素是普通元素，他的子项是层叠上下文元素，寻找父级层叠上下文元素（也就是根元素），所以会被父级覆盖。

若将flex图片的z-index值改为0，层叠顺序在block水平之上。

4、层叠上下文导致的有趣的现象

<style type="text/css">
	text{position:absolute;left:110px;top:110px;color:#FFF;}
	img{
		animation:fadein 5s 1;
		-webkit-animation:fadein 5s 1; /* Safari 和 Chrome */
	}
	@keyframes fadein{
		from{opacity:0;}
		to{opacity:1;}
	}
</style>

<body style="padding-left:100px;">
	<text>图片说明，我是什么什么!</text>
	<img src="1.png">
</body>

透明度为1（opacity:1）为普通元素，其他透明度值则新建层叠上下文，层叠顺序z-index:auto级别，跟absolute文字一样，但遵循后来居上原则，于是淡出的时候，文字是看不见的，知道东湖结束，此时opacity值为1，文字可见。

八、z-index实践

1、最小化影响原则

目的：是为了避免z-index嵌套层叠关系混乱；

造成混乱的原因：元素的层叠水平主要由所在的层叠上下文决定；IE7的z-index:auto也会新建层叠上下文。

做法：避免使用定位属性；定位属性从大容器评级分离为私有小容器。

2、不犯二准则

目的：避免z-index混乱，一山比一山高的样式问题。

原因：多人协作以及后期维护造成的；

做法：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2-----不犯二准则。

3、组件层级计数器

目的：避免浮层组件因z-index被覆盖的问题

原因：总会遇到意想不到的高层及元素；组件的覆盖规则具有动态性。

做法：组件层级计数器方法（通过JS获取body下元素的最大z-index值）

4、可访问性隐藏

可访问性隐藏：人肉眼看不见，但是辅助设备可以识别。

设置z-index负值的元素，在层叠上下文的背景之上，其他元素之下。

本文链接：https://blog.csdn.net/muzi187/article/details/78953446

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Mysql 查找乱码数据_mysql乱码数据如何快速查找分类-程序员宅基地

文章浏览阅读2.6k次。线上课程名称出现乱码数据，或者是"？？？"或者是类似 “ä¿èº«æ˜¯ä¸å›½ä¼ ç»Ÿæ”¿æ”完全摸不着头脑的，想要先做一次数据修复，但是课程表有2,3万的数据，一条条看下来有没有乱码，还是很费时的。想通过sql来筛选出这些数据，可以借助sql的编码转换函数convert，使用latin1字符集来区分正常的和非正常的。SELECT Id,Title FROM Course WHE_mysql乱码数据如何快速查找分类

opa847方波放大电路_积分电路的原理解析和电路调试-程序员宅基地

文章浏览阅读6.9k次，点赞3次，收藏24次。积分电路是模拟电路的重要电路之一，主要用于波形变换、放大电路失调电压的消除及反馈控制中的积分补偿等场合。教科书在讲解积分电路时都是用高等数学的积分公式来表述，当ui在一段时间内是一个负向的阶跃电压时，在理想的条件下，与之对应的输出电压变化表现为一个恒流源向C电容充电，如图1所示。R1 C1称为积分时间常数。图 1这些表述很经典，但高职学生高数学得比..._方波积分电路

Android性能优化（一）—— 启动优化，冷启动，热启动，温启动_温启动优化-程序员宅基地

文章浏览阅读5.3k次，点赞10次，收藏26次。标签： Android架构师之路APP启动方式App启动方式分三种：冷启动（cold start）、热启动（hot start）、温启动（warm start）▲ 冷启动系统不存在App进程（APP首次启动或APP被完全杀死）时启动APP此时，APP的启动将经历两个阶段：第一阶段1.加载并启动app;2.app启动后，第一时间为app显示一个空白的window；3.创建app进程第二阶段系统一旦创建了app进程，app进程就要负责做以下的任务：1.创建app对象；2_温启动优化

VRCHAT模型上传常见问题汇总_vrchat missing credentials-程序员宅基地

文章浏览阅读4.8w次，点赞5次，收藏20次。首先是Unity5.6.3p1,VRC插件只兼容5.6.3p1,所以版本不能下错 VRCSDK(这个是上传模型到VRCHAT的插件,群文件有多个版本)unity插件1如果选择用Blender导入模型:(推荐,功能完善,方便快捷)_vrchat missing credentials

ue4人物动作_【UE4】对自定义角色进行动作捕捉面部捕捉-程序员宅基地

文章浏览阅读3.1k次，点赞2次，收藏20次。【其他相关】X Tesla：【动捕面捕】——价格划算效果好的解决方案（非常详细）zhuanlan.zhihu.comX Tesla：【三维角色建模】你是数学家？艺术家？懒人？还是土豪？zhuanlan.zhihu.comX Tesla：【Blender】人物角色Blendshape( UE4 MorphTarget) 面部表情制作方案zhuanlan.zhihu.comX Tesla：【UE..._mouth funnel

基于 SparkGraphx 实现适用于位置信息的 DBScan聚类_dbscan聚类经纬度数据-程序员宅基地

文章浏览阅读1.6k次。基于 SparkGraphx 实现的 DBScan聚类关于DBScan算法的详细介绍请参见维基百科https://en.wikipedia.org/wiki/DBSCANGraphx 实现Dbscan 图解_dbscan聚类经纬度数据

随便推点

云原生API网关 - 开源项目Hango网关设计与实践-程序员宅基地

文章浏览阅读2k次。解读开源Hango网关的云原生设计与实践，本文先从云原生溯源，解读云原生API网关选型特点；再进一步解读网易数帆开源Hango云原生API网关设计及大规模落地实践。云原生溯源什么是云原生C..._hango网关

改变input提示颜色_vue input 提示音颜色-程序员宅基地

文章浏览阅读191次。input:focus::-webkit-input-placeholder{color:#9b989b}改变input提示颜色input__control:placeholder-shown:not(:focus)+.ppvx_text-input__label{top:.6875rem;font-size:1rem;background-color:transparent}占位符-如图所示_vue input 提示音颜色

python中字符串逆序的编写_请编写一个C函数，将一个字符串逆序-程序员宅基地

文章浏览阅读720次。目前有两种思路，一个是申请一片辅助空间，然后将原字符串逆向拷贝到辅助空间，然后输出；另一种是原地逆序，不需要额外的辅助空间，方法就是字符串首尾交换。#include #include char* str_reverse(char* str){int n = strlen(str) / 2;int i = 0;char tmp = 0;for(i = 0; i < n; i++){tmp =..._给定一个字符串s,编写一个python函数,将字符串中的每个字符按照ascii码值逆序输出