专栏首页前端桃园深入理解z-index

深入理解z-index

要解决的问题

在页面编写的过程中,经常需要处理元素的重叠。重叠的顺序不当则容易造成元素被错误地遮盖等现象。一般地,有很多人认为只需要指定元素的z-index即可调整重叠的顺序,但是实际上并不是这样的。

重新理解页面维度

当我们打开一个网页,我们会看到一个二维的世界。在这个二维的世界里,页面里的box(盒子)各有自己的x坐标和y坐标。比如,在下图所示的页面结构里面,有四个div元素。它们分别具有自己的宽和高,而每个box左上角的x和y坐标就分别是这个box在页面中的x和y坐标。因而,在我们直观的感知里,页面是二维的。

image.png 然而,页面实际上还有第三个维度。垂直于x轴与y轴的方向,存在一个c轴。c轴的正方向指向用户。对于一个页面上的box,它一定有一个c坐标。注意,此处的c坐标并不是z-index。下图中的坐标名有误,z应该是c。

image.png

两个重叠的box最能证明这第三个维度的存在,如果页面上有两个元素是重叠的,那么浏览器的渲染引擎必须决定哪一个box的重叠部分要被放在前面。决定的方法很简单,就是直接比较这两个元素的c坐标。c坐标大的那一个,就被渲染在前面;反之,则被压在下面。

你不能把c坐标的大小理解成离用户的远近,因为如果那样理解,那么应该有“近大远小”现象。然而事实上,c坐标大的box并不会变小,只是被浏览器渲染在c坐标小的box前面而已。就好像在现实生活中,我们把两张卡片叠在一起,它们会有上下之分,但是看起来两张卡片的大小并不会有所改变(因为它们足够薄且小)。会产生近大远小现象的应该是z坐标,学过一点空间几何的人都应该熟悉。这也是我称这个维度为c坐标而非z坐标的原因。

下面我们一起来探究一下页面box之间是如何重叠的,换句话说,浏览器是怎么决定一个box的c坐标的。

默认重叠

对于重叠的元素,浏览器默认会按下面的顺序重叠。编号越大的box类型,所拥有的c坐标就越大,因此排在前面。

  1. 正常流当中的block level的box
  2. 浮动的元素
  3. 正常流当中inline level或者inline-block level的box
  4. position值不是static(非正常流中)的box

这里并不是完整的列表,因为我略去了一些后面才会提到的内容。下面是一个示例:

可以看到,上述四种不同类型的box中,具有最大c坐标的是第4种,它能够覆盖其他所有三种元素。

你需要注意的一点是,不要用DOM树的结构来理解重叠。DOM树中下一级的box完全可以重叠在上一级box之上。这都和Stacking Context有关,我们接下来就详细解释一下。

Stacking-Context

上述四种box类型的重叠规律,当且仅当这些box在同一个Stacking Context的时候生效。不同Stacking Context中的box之间的重叠在下面会提到。

什么是Stacking Context?假设你正在玩贴纸,将很多贴纸贴到同一张纸上,并且贴纸之间可能产生重叠。Stacking Context就像是这张纸。浏览器首先按照默认的重叠规律,将同一个Stacking Context下的所有元素排好顺序,然后按照这个顺序渲染到Stacking Context上。例如,在下面的DOM结构中,有5个box,其中node1是一个Stacking Context,其他的都不是。

image.png

在渲染的时候,浏览器将node1当做画板,其他box都是贴纸。在决定贴纸顺序的时候,浏览器是不会考虑它们DOM结构上的父子关系的。也就是说,node3-1完全可以被渲染在node2-1的后面,只要在前面所说的默认重叠顺序中,node3-1具有的c坐标比node2-1来得低即可。

整个“贴纸”的过程如下图。可以看到,浏览器在当前Stacking Context中,无视了“贴纸”们的DOM结构之间的关系,而是通过我们前面提到的默认重叠顺序决定“贴纸”的先后关系。决定之后,浏览器将所有“贴纸”贴到Stacking Context上,这个过程称作Composite(组合)。

什么样的元素是一个Stacking-Context

符合下面要求的页面box,都是一个Stacking Context。

  1. 根元素(html元素)
  2. position是absolute或者relative,并且z-index不是auto的元素 是flex item,并且z-index不是auto的元素
  3. opacity值小于1的元素
  4. 在mobile webkit以及Chrome 22+中,position: fixed的元素

多个Stacking-Context之间的重叠

由上面产生Stacking Context的条件,我们可以知道,一个页面上一般有多个Stacking Context。那么多个Stacking Context之间如何决定重叠顺序呢?浏览器一般按下面的规则来决定其顺序,这实际上就是之前我们提到的默认重叠顺序的完整版。

  1. Stacking Context的背景和边框
  2. 具有负的z-index的,且position值不是static(非正常流中)的子box的Stacking Context,且z-index数值越小,其c坐标越小
  3. 正常流当中的block level的box
  4. 浮动的元素
  5. 正常流当中inline level或者inline-block level的box
  6. position值不是static(非正常流中)的box,且z-index为0或者auto
  7. 具有正的z-index的,且position值不是static(非正常流中)的子box的Stacking Context,且z-index数值越小,其c坐标越小

你需要注意到的是,z-index只能作用在position值不是static的box上方能起效。下面的例子可以说明多个Stacking Context之间的重叠规律。

image.png 在这里,.wrapper、#b1和#b2分别都是一个Stacking Context。#b1和#b2是.wrapper的子Stacking Context,浏览器会首先组合#b1以及组合#b2,之后再将#b1和#b2组合到.wrapper上。由于#b1具有正的z-index,而#b2具有负的z-index,所以#b1被组合到了#b2的上面。

你可以试着把#b1的z-index改成-2,那么它就变成了第二类的box(和#b2一样),又因为它的z-index比#b2来得小,所以它会被组合到#b2之后。

总结

z-index只在同一个Stacking Context的组合过程中,参与各个子box的重叠顺序的决定。但是页面box的重叠关系并非仅仅和z-index有关。清楚地认识z-index的工作原理,有助于你写出更有效率的样式表。

本文分享自微信公众号 - 前端桃园(betaoyuan)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • KDD 2018今日开幕,刘兵唐杰分获创新奖及杰出服务奖

    AI 科技评论按:伦敦时间 8 月 20 日晚间,数据挖掘顶会 KDD 2018 于英国伦敦正式开幕,雷锋网 AI 科技评论带来一线专题报道。

    AI科技评论
  • java后端开发每天遇到的jsp,了解一下

    JSP脚本片断(scriptlet)用于在JSP页面中编写多行Java代码(在<%%>不能定义方法)。语法:<%多行java代码 %>

    好好学java
  • 8张图理解Java

    一图胜千言,下面涉及的图解均来自Program Creek 网站的Java教程,目前它们拥有最多的票选。如果图解没有阐明问题,那么你可以借助它的标题来一窥究竟。

    用户1093975
  • IDEA环境下SSM整合------环境配置

    一、做不出详细的概念叙述和文本设计,本文主要以实战步骤为主,少量解释为辅助,下面请大家牢记两幅图:

    瑾诺学长
  • GithubPage自定义腾讯404界面

    之前看到腾讯网络的404和github自带的404,反差很大,于是想自己弄一个了.

    @坤的
  • 在 Tomcat 中设置 Tapestry 框架的 html 热加载

    如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立...

    LeoXu
  • blast简介及格式解读及练习题

    双序列比对可以采用是基于动态规划算法的Needleman-Wunsch(NW)和Smith-Waterman algorithm(SW)算法,虽然精度高,但计...

    生信技能树
  • 溯源小记

    看对方的目的是什么,就是最终目标是做什么。然后根据自己经验 看看达到这个目标 需要进行什么操作 逆推回去。看看这些过程都会留下什么日志。

    安恒网络空间安全讲武堂
  • 关于网页设计的一些统计数字

    ● 2003年,全世界网页的平均大小是93.7KB,2008年增长到312KB,5年中翻了3.3倍。(这里的网页大小包括图片、CSS文件、Javascript文...

    ruanyf
  • 七夕不送礼,送礼就送HttpServletResponse,一看就懂

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象、和代表响应的response对象。获取网页提交过来的数据,...

    好好学java

扫码关注云+社区

领取腾讯云代金券