因为显示器显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别，表示一个元素在叠加顺序上的上下立体关系。

 

可能的值：

注释：  所有主流浏览器都支持 z-index 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。

z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

概念：

 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅能在定位元素上奏效。

 

 

演示：

 

1. 两个div，无设置z-index，第二个粉色div向上移动50px时，正常显示如下图。

<div style="width:200px;height:200px;background-color:#f5ff7d;"></div>

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;"></div>

 

---------------------------------------------------------------------------------------------------

2. 粉色div设置z-index为-5时，如下图。（注：粉色div已设置position : relative ，故z-index可生效 ）

<div style="width:200px;height:200px;background-color:#f5ff7d;"></div>
<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:-5;"></div>

---------------------------------------------------------------------------------------------------

3. 黄色div设置z-index为30，粉色为25时，30>25，结果如下图。

<div style="width:200px;height:200px;background-color:#f5ff7d;z-index:30;"></div>

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:25;"></div>

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素没有定位，对其设置的z-index是无效的。虽然黄色div的z-index比粉丝div的大，但是由于黄色div未定位，其z-index属性未起作用，所以仍然会被粉色div覆盖。

---------------------------------------------------------------------------------------------------

相同z-index：

     

1. 如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

<div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;z-index:1;"></div>

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;top:-50px;z-index:1;"></div>

2. 如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素

<div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;top:50px;"></div>

<div style="width:100px;height:100px;background-color:#ff7a74;"></div>

---------------------------------------------------------------------------------------------------

父子z-index关系处理：

 

1. 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

<div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;z-index:10;">

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;z-index:-5;"></div>

</div>

---------------------------------------------------------------------------------------------------

2. 如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效        

<div style="width:200px;height:200px;background-color:#f5ff7d;position:relative;">

<div style="width:100px;height:100px;background-color:#ff7a74;position:relative;z-index:-5;"></div>

</div>

---------------------------------------------------------------------------------------------------

兄弟子元素z-index关系处理：

如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

<div style="width:100px;height:100px;background-color:#f5ff7d;position:relative;z-index:5;">

<div style="width:50px;height:250px;background-color:#ff7a74;position:relative;z-index:50;"></div>

</div>

<div style="width:100px;height:100px;background-color:#c6c500;margin-top:-10px;position:relative;z-index:10;">

　　<div style="width:30px;height:150px;background-color:#5ddaff;position:relative;z-index:-10;"></div>

</div>

虽然第一个div的子元素（即s1）的z-index比较高，但是由于其父元素（即f1）z-index比第二个平级div（即f2）低，所以第一个div子元素（即s1）会被第二个父辈div（即f2）及其子元素（即s2）覆盖

转载于:https://www.cnblogs.com/dududyx/p/4881469.html

z-index优先级总结相关推荐

1. HTML中z index属性是用来,css中z-index 属性与用法详解

   Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...

2. js怎么设置z index.html,HTML5 Canvas set z-index

   j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...

3. html设置z index.html,CSS中z-index属性的使用方法和示例介绍

   怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...

4. mysql 索引合并_MySQL 索引合并（Index Merge）优化

   本文问题 什么是Index Merge?Index Merge的限制有哪些? 如何查看语句是否使用了Index Merger? Index Merge有哪几种?分别适用于那些情景? 如何控制优化器是否 ...

5. css索引_CSS中的Z索引：它是什么以及它做什么

   css索引 什么是Z索引? (What is a Z Index?) Z Index (z-index) is a CSS property that defines the order of ove ...

6. 下列程序的运行结果是 #include ＜stdio.h＞ void main() { int x = 10, y = 20, z = 30；

   1.直接运行程序得出结果 #include <stdio.h>void main() {int x = 10, y = 20, z = 30;printf("%d %d %d % ...

7. Google 地图 API 参考

   杨航收集技术资料,分享给大家 Google 地图 API 参考 Google 地图 API 现在与 Google AJAX API 载入器集成,后者创建了一个公共命名空间,以便载入和使用多个 Goog ...

8. HTMLCSSJavaScript个人入门自学笔记

   herf="URL"中,URL末尾不加斜杠时,会向服务器发出两次请求. 这是因为URL末尾不加斜杠时,所在文件夹找不到相应的资源.所以服务器会自动填加斜杆向下一级寻找. img中s ...

9. 三小时学会css（菜鸟教程精华版）【中】

   三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边 ...

10. PHP自学笔记(基础语法篇)

    本文章是我在b站上自学PHP的学习笔记,如果有错误,欢迎大家改正,谢谢. 文章目录 1. PHP介绍 1.1 什么是PHP 2. 认识PHP脚本程序 2.1 PHP语言标记(四种定界符) 2.2 结束 ...

最新文章

1. C语言 cgi(2)
2. 使用nexus3配置golang私有仓库（go私服）
3. Java SE 7、8、9 –推进Java
4. IntelliJ IDEA for Mac下载、安装、使用TunnelliJ插件（一种TCP/IP Monitor）
5. Netcdf中时间的格式化
6. 95后人才吸引力城市排名发布，深圳位居全国第二
7. python 干什么工作具有明显优势-为什么这么多人学Python？Python在就业上有什么优势？...
8. python中输入汉字_python汉字输入
9. 6.Linux性能诊断 --- 远程通信gRPC,kafka,docker
10. mvc基于 ajax实现菜单下拉列表
11. 柔性整列压力传感器工作原理记录
12. 163邮箱手机收件服务器设置,网易邮箱全面默认开通IMAP 手机收信提速10倍
13. python长度单位换算表_常用长度单位换算表
14. 如何知道股票里面有庄
15. 关于app的几个核心功能的设计想法
16. Aspose.Words五 MergeField
17. 【Web安全笔记】之【6.0 内网渗透】
18. VR全景创业好不好做？蛙色VR为你解答
19. 基于javaweb、springboot2.1旅游管理系统01
20. system 权限读取注册表HKEY_CURRENT_USER

热门文章

1. [8] ADB 查看日志
2. STL学习笔记-set的基本原理以及插入、遍历
3. Qt学习笔记-基于QGraphicsScene的填词游戏
4. mysql php示例,PHP操作MYSQL简单示例
5. 多实例多进程网络编程PHP,php socket网络编程基础知识（四）：多进程
6. kl散度度量分布_概率图简要模型笔记（二）马尔可夫随机场与KL散度、最大熵、指数族分布、高斯分布、极大似然分布...
7. css3书页翻转,CSS3实现3D翻书效果
8. centos8.4 nginx 问题
9. 加速国内 Github 访问，下载，的9种方案！
10. java 0xf0_java 中类似js encodeURIComponent 函数的实现案例