概念

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

层级关系的比较

1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。

2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。

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

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

顺序规则

如果不对节点设定 position 属性,位于文档流后面的节点会遮盖前面的节点。

<div id="a">A</div>
<div id="b">B</div>

定位规则

如果将 position 设为 static,位于文档流后面的节点依然会遮盖前面的节点浮动,,所以 position:static 不会影响节点的遮盖关系。

<div id="a" style="position:static;">A</div>
<div id="b">B</div>

如果将 position 设为 relative (相对定位),absolute (绝对定位) 或者 fixed (固定定位),这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点,说明前者比后者的默认层级高。

<div id="a" style="position:relative;">A</div>
<div id="b">B</div>

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

<div id="a">
<div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

上面互相覆盖在什么时候用到这样的实现? 看起来偏门, 其实很常用, 比如说, 电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域, 二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的节点覆盖二级类目的悬浮层. 如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.

参与规则

我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>

<div id="a" style="z-index:2;">A</div>
<div id="b" style="position:relative;z-index:1;">B</div>
<div id="c" style="position:relative;z-index:0;">C</div>

默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

<div id="a" style="position:relative;z-index:1;">A</div>
<div id="b" style="position:relative;z-index:0;">B</div>
<div id="c" style="position:relative;">C</div>
<div id="d" style="position:relative;z-index:0;">D</div>

从父规则

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
<div id="a-1">A-1</div>
</div> <div id="b" style="position:relative;z-index:0;">
<div id="b-1">B-1</div>
</div>

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

文章参考

http://www.neoease.com/css-z-index-property-and-layering-tree/

http://etosun.com/z-index.html

z-index详细攻略的更多相关文章

  1. 怎样注册uber司机 如何注册uber司机 最新详细攻略

    怎样注册uber司机 如何注册加入uber司机 全国加入Uber 的要求 车辆要求:要求裸车价8万以上,车龄5年以内,第三者责任险保额30万以上,不支持20万以下的面包车/商务车,不支持4座以下车辆. ...

  2. 打豪车应用:uber详细攻略(附100元优惠码)

    在嘀嘀打车和快的打车交战热闹的时候,美国的打车应用uber进入中国.与在美国以个人司机注册做 Uber 司机为主的模式不同,Uber 在中国采用与租车公司合作.由租车公司提供车辆和司机的模式,同时中文 ...

  3. 打豪车应用:uber详细攻略(附100元优步uber优惠码、uber优惠券、优步优惠码、优步优惠券)

    在嘀嘀打车和快的打车交战热闹的时候,美国的打车应用uber进入中国.与在美国以个人司机注册做 Uber 司机为主的模式不同,Uber 在中国采用与租车公司合作.由租车公司提供车辆和司机的模式,同时中文 ...

  4. 2020最新nginx+gunicorn+supervisor部署基于flask开发的项目的生产环境的详细攻略

    本攻略基于ubuntu1804的版本,服务器用的华为云的服务器,python3(python2已经在2020彻底停止维护了,所以转到python3是必须的)欢迎加我的QQ6398903,或QQ群讨论相 ...

  5. 制作Windows服务项目详细攻略

    1.在windows服务下面获得根目录: string assemblyFilePath = Assembly.GetExecutingAssembly().Location; string asse ...

  6. 来开源吧!发布开源组件到 MavenCentral 仓库超详细攻略

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  7. ProGuard代码混淆详细攻略

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/52770993 本文出自: [HansChen的博客] ProGuard简介和工作流程 ...

  8. Win7系统搭建WiFi热点详细攻略

    (转自:http://blog.csdn.net/gisredevelopment/article/details/16113889) 一.如果你之前没有在笔记本上搭建过WiFi,那么恭喜你,你的笔记 ...

  9. CentOS 7.4 下安装部署Nagios监控系统详细攻略(三)

    Nagios是一个流行的电脑系统和网络监控程序,它检测主机和服务,当异常发生和解除时能提醒用户.它是基于GPLv2开发的开源软件,可免费获得及使用. nagios工作原理 nagios的功能是监控服务 ...

  10. iOS打包Framework真机和模拟器兼容合并版本 - 详细攻略步骤

    打包Framework,测试时: 1.用模拟器打包,测试时只能跑在模拟器 2.用真机打包,测试时只能跑在真机 那么怎么做到一个版本兼容以上两种场景呢? 解决如下: 1.打开终端 2.输入   lipo ...

随机推荐

  1. loadrunner socket协议问题归纳(4)---buffer接收变长和定长的数据

    测试场景:聊天系统 用户登录后,要先向服务器发送用户名,然后可以发送聊天信息,同时也可以接受聊天信息. 如果接受的字符为定长时,可以设定接受长度.recv buf2 66 #include " ...

  2. jquery选择器 直观实验

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 第二次c++作业

    用c语言实现电梯问题的方法: 先用一堆变量存储各种变量,在写一个函数模拟电梯上下移动载人放人的过程. c++: 构造一个电梯的类,用成员函数实现电梯运作的过程. 对c和c++的理解太浅,并没有感觉到用 ...

  4. UVA 11270 轮廓线

    题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33787 题意: 用1*2或2*1的长条把n*m方格铺满的方案数. ...

  5. Codeforces Round #312 (Div. 2) E. A Simple Task 线段树+计数排序

    题目链接: http://codeforces.com/problemset/problem/558/E E. A Simple Task time limit per test5 secondsme ...

  6. 在服务器中使用 Entity Framework 的 Migration 更新数据库

    在开发环境中,每次我们对要对数据库进行更改,比如增加修改表字段等.改好Entity类后,我们只需在Nuget程序包管理控制台运行 update-database 脚本却可: update-databa ...

  7. DNS测试工具的使用(了解)

    dig命令, host命令, nslookup命令,rndc命令 dig命令(直接测试DNS性能,不会查询/etc/hosts文件) dig [-t RR_TYPE] name [@SERVER] [ ...

  8. eclipse生成jar包 注意事项!

    原文转自:http://www.cnblogs.com/zhangfei/archive/2013/01/22/2871075.html 第一:普通类导出jar包,我说的普通类就是指此类包含main方 ...

  9. IDEA换行CRLF, LF, CR的解释和默认设置

    在window下开发有一个大坑,就是换行默认是CRLF,也就是回车换行,但是Linux下只有换行LF,这样代码提交后,会出现编译问题,所以最好的办法是在IDEA下设置默认为LF. 首先我们先介绍CRL ...

  10. 运维堡垒机----Gateone

    简介: 运维堡垒机的理念起源于跳板机.2000年左右,高端行业用户为了对运维人员的远程登录进行集中管理,会在机房里部署跳板机.跳板机就是一台服务器,维护人员在维护过程中,首先要统一登录到这台服务器上, ...