本文摘自:飘零雾雨的博客

z-index的重要性

在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level)。受益于它,你能做Popup, DropDown, Tips, 图文替换等等。

在开始本篇之前,或许我们要先了解一下关于z-index的基本信息。

W3C这样描述

每个元素都具有三维空间位置,除了水平和垂直位置外,还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序,由层叠上下文和层叠级别决定。

在文档中,每个元素仅属于一个层叠上下文。元素的层叠级别为整型,它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。

同一层叠上下文中,层叠级别大的显示在上,层叠级别小的显示在下,相同层叠级别时,遵循后来居上的原则,即其在HTML文档中的顺序。

不同层叠上下文中,元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序,与自身的层叠级别无关。

z-index语法和应用

z-index: auto | <integer>

z-index 接受的属性值为:关键字auto和整数,整数可以是负值(Firefox2.0及之前不支持负值)。

需要注意的是 z-index 虽然很给力,却只能应用于定位元素(即设置了 position 属性为非 static 值),其它情况下,z-index 将被忽略。

对于定位元素而言,z-index 意味着:

  • 确定该元素在当前层叠上下文中的层叠级别。
  • 确定该元素是否创建了一个新的局部层叠上下文。

创建层叠上下文

在规范中说明:当某个元素的 z-index 未显式定义或者被指定为 auto 时,该元素不会产生新的局部层叠上下文。也就是说它可以和兄弟,祖先,后辈元素处在同一个堆叠上下文中,它们被放在一起比较层叠级别,儿子可以盖住祖先,父亲也可以盖住儿子,儿子甚至可以越过祖先,盖住祖先的兄弟,在层叠上下文中,它们是并级的关系。来看这样一个例子 DEMO1z-index与创建层叠上下文

值得高兴的是,大部分浏览器都实现了这个特性;不过在IE6/7下,不论 z-index 值是否被显式定义,都将产生新的局部层叠上下文,也就是说子元素不可以越过是定位元素的父亲,子元素都处在新创建的局部层叠上下文中,只能在内部进行层叠级别的比较。

深入浅出

某区域内有个浮层提示或者下拉菜单,于是可能需要遮住该区域之下的区域。

HTML

<div class="a">     ...     <div class="tips">我是一个简陋的浮层提示</div> </div> <div class="b">     ... </div>

CSS

.a{position:relative;} .tips{position:absolute;z-index:99;}

如上HTML/CSS代码,很显然,浮层 tips 将可以覆盖在其父级元素 a 的兄弟元素 b 之上。

于是你的意图得到实现,效果如下 图一

(图一)

这是具体的实现例子 DEMO2z-index实现元素层叠

不过很显然,从 DEMO2 来看,你依然无法准确的判断出在各浏览器下,tips 能盖住 b 是因为其父级的定位还是本身的定位。

但是我们可以做这样一个测试,我们让 b 也拥有定位,Code如下:

CSS

.a{position:relative;} .tips{position:absolute;z-index:99;} .b{position:relative;}

这段代码run完之后,就比较纠结了,你能得到的效果将会如下 图二

(图二)

当然要给出具体实现 DEMO3验证创建局部层叠上下文

首先,我们来解读一下这个例子:因为 a 和 b 都是 relative 且没有定义 z-index (等同于z-index:auto),根据后来居上的原则,此时 b 的层叠级别是要高于 a 的,意思就是说 a 是无法遮住 b 的。不过从 DEMO3 中,我们看到 a 的子元素 tips 遮住了 b,这就表示 tips 能越过它,所以可以判断出 a 没有创建新的局部层叠上下文。很明显,这是完全吻合标准对此的定义。

不过这是在非IE6/7之下结果。在IE6/7下,我们看到 tips 并没能遮住 b,也就是说 tips 无法越过父级,因为 a 创建了新的局部层叠上下文,而 a 的层叠级别又比 b 低,所以 tips 无法遮住 b,这也就是在IE6/7下常出现覆盖Bug的根源。

结合 DEMO2 和 DEMO3,你能很肯定的得出以下结论:

  • 当定位元素没有显式定义z-index值时,不会创建新的局部层叠上下文
  • 子元素有可能和祖先的兄弟或者祖先兄弟的子元素处在同一个层叠上下文中

在实际工作中,有些情况可能是你没注意或者已然存在的。比如你事先可能并不知道 b 也是定位元素,或者由于某些原因,你需要将其设置为定位元素,于是可能出现各种兼容问题。如果你不了解 z-index 是如何创建局部层叠上下文,且又没注意到IE6/7的实现错误,那么处理起这样的问题将会让你深陷泥潭。

所以在实际的场景中,如果是为了相互覆盖而设置为定位,那么显式的定义 z-index 值,将可避免出现创建新局部层叠上下文差异。

如果需要越过祖先和其它区块内部元素进行相互层叠,那么考虑IE6/7的情况,也应该尽量避免给父级元素进定位。

opacity与层叠上下文

我们知道 opacity 属性是用来设置元素不透明度的。但可能知道 opacity 和层叠上下文有关的不多,不过没关系,这里我们简单聊聊这个话题,有两点必须注意:

  • 当opacity值小于1时,该元素会创建新的局部层叠上下文,也就是说它可以和定位元素进行层叠层别比较
  • 当opacity值小于1时,该元素拥有层叠级别且相当于z-index:0或auto,但不能定义 z-index ,除非本身是定位元素

简单来说,当一个普通的元素定义了 opacity 的值小于1时(比如 opacity:.5),那么该元素的层叠级别将会高于普通元素,其效果类同于定位元素没有显式定义 z-index 的情况,唯一的区别是没有显式定义 z-index 的定位元素不会产生局部层叠上下文,而定义了 opacity 值小于1的元素会产生新的局部层叠上下文。

opacity猜想

假定我们有 abc 三个元素,它们相互层层覆盖在一起,如果这时将 a 元素定义为 opacity:.8,你知道结果会怎样吗?

HTML

<div class="a">a</div> <div class="b">b</div> <div class="c">c</div>

CSS

.a,.b,.c{width:100px;height:100px;} .a{opacity:.8;background:#999;} .b{margin:-70px 0 0 30px;background:#090;} .c{margin:-70px 0 0 60px;background:#f00;}

如果你看明白了我对于 opacity 与层叠上下文的描述,相信你可以猜到结果,是的,a 元素将会覆盖 b 和 c 元素,虽然它在HTML文档中出现在 b 和 c 之前,且不是定位元素。

必须看看具体的示例不是么?DEMO4opacity与局部层叠上下文猜想

如果我们将 b 和 c 设置为定位元素,又将会如何呢?

CSS

.a,.b,.c{width:100px;height:100px;} .a{opacity:.8;background:#999;} .b{position:relative;margin:-70px 0 0 30px;background:#090;} .c{position:relative;margin:-70px 0 0 60px;background:#f00;}

不急,我们可以接着看示例 DEMO5opacity与局部层叠上下文猜想2

从 DEMO4 和 DEMO5 两例,我们可以验证:当一个普通元素定义了 opacity 为小于1的值时,该元素将像定位元素一样拥有层叠级别,可以覆盖普通元素,并且其层叠级别与未显式定义 z-index 的定位元素一样。

opacity创建局部层叠上下文

与未显式定义 z-index 的定位元素唯一不同的是 opacity 值小于1的元素会创建局部层叠上下文。

创建局部层叠上下文意味着什么,前文我们已经详述过。所以不再赘述,这里只给一个示例用以验证该特性。先奉上代码:

HTML

<div class="a">a     <div class="d">d</div> </div> <div class="b">b</div> <div class="c">c</div>

CSS

.a,.b,.c,.d{width:100px;height:100px;} .a{opacity:.8;background:#999;} .b{position:relative;margin:-70px 0 0 30px;background:#090;} .c{position:relative;margin:-70px 0 0 60px;background:#f00;} .d{position:absolute;z-index:99;height:50px;background:#090;}

你可以先看看具体结果 DEMO6opacity创建新局部层叠上下文

你会发现虽然 a 的子元素 d 将 z-index 定义为99,但 d 仍然无法遮住 b 和 c 元素,这是因为 a 创建了新的局部层叠上下文,d 元素无法超越父级。

需要注意的是,此时就算 a 元素变成了定位元素,也不能改变其会创建新局部层叠上下文的命运,因为他设置了opacity:.8

按照我们前文所说,如果 a 没有定义 opacity:.8 ,但却像 b 和 c 元素一样设置了 relative,那么其子元素 d 将可以覆盖 b和 c,至于这个例子就不再奉上了,大家随便写个测试一下即可。

图文替换

上述都是理论性的东西,相对枯燥,来个实际点的应用场景。

我们聊聊图文替换的事,相对于使用较广的方案如:缩进正/负值(正/负text-indent)、超小字体、margin溢出、padding溢出、line-height溢出、透明字体、display:none、visibility:hidden等方案而言,使用 z-index 负值的方案,有一些明显的优势:

  • 无需考虑是否会有性能问题类同使用上述列举中的前几种方案(比如使用负缩进值-9999px,虽然此时文本被移到屏幕之外或者被裁减,但仍然会绘制一个宽9999px的盒子);
  • 没有像类似超小字体和透明字体一样的方案会需要一些额外的hack;
  • 不像display:none方案那样有SEO欺骗嫌疑;
  • 当图片加载失败时,可以显示文字;
  • and etc...

先来看看一个图文替换的例子 DEMO7图文替换实例

在不同的网络环境下,它的表现如下 图三

(图三)

具体的Code很简单:

HTML

<a href="#top" title="回到顶部"><span>TOP▲</span></a>

CSS

a,a span{display:inline-block;width:38px;height:38px;} a{background:url(images/ico.png) no-repeat;} a:hover{background-position:0 -39px;color:#fff;} a span{position:relative;z-index:-1;background-color:#eee;} a:hover span{background-color:#999;}

你会发现我们将 span 设置为了 z-index:-1,此时它的层叠级别将比正常的元素还要低,所以它可以被其父元素超链接a盖住,从而在图片正常载入时显示父元素的背景图,在网络环境不好图片载入有问题时,显示自身。

很多时候,要实现一个需求可能有无数种解决方案,能够适应情况越多的方案毫无疑问会脱颖而出,这就要求我们可以去更多的思考,而不是更多的拷贝。

你需要了解的z-index世界的更多相关文章

  1. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  2. 你知道吗?Web的26项基本概念和技术

    这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助 作者: 小鱼  来源: 前端里  发布时间: 2014-08-01 22:56  阅读: 10477 次  推荐: 51   原文链 ...

  3. Web的26项基本概念和技术

    ---恢复内容开始--- Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. 【JavaScript】你知道吗?Web的26项基本概念和技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  6. Linux之旅(1): diff, patch和quilt (下)

    Linux之旅(1): diff, patch和quilt (下) 2 quilt 我们自己的项目能够用cvs或svn管理所有代码.但有时我们要使用其它开发人员维护的项目.我们须要改动一些文件,但又不 ...

  7. Linux游(1): diff, patch和quilt (下一个)

    Linux游(1): diff, patch和quilt (下一个) 2 quilt 我们自己的项目可以用cvs或svn管理所有代码.但有时我们要使用其它开发人员维护的项目.我们须要改动一些文件.但又 ...

  8. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  9. go语言程序设计学习笔记-1

    https://www.jb51.net/article/126998.htm go标准库文档https://studygolang.com/pkgdoc 1. 如果想要再本地直接查看go官方文档,可 ...

  10. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

随机推荐

  1. mysql 5.7新数据库sys解析(一)

    mysql5.7增加了sys 系统数据库,通过这个库可以快速的了解系统的元数据信息 这个库确实可以方便DBA发现数据库的很多信息,解决性能瓶颈都提供了巨大帮助   这个库在mysql5.7中是默认存在 ...

  2. libpcre.so.1 cannot be found

    安装完Nginx之后,启动报错. [vagrant@localhost sbin]$ sudo ./nginx ./nginx: error while loading shared librarie ...

  3. [Whole Web, Node.js, PM2] Restarting your node.js app on code change using pm2

    Aadd watch to the config.json file: { "apps": [{ "name": "App1", " ...

  4. Monitoring and Tuning the Linux Networking Stack: Receiving Data

    http://blog.packagecloud.io/eng/2016/06/22/monitoring-tuning-linux-networking-stack-receiving-data/ ...

  5. iostat来对linux硬盘IO性能进行了解

    http://www.php-oa.com/2009/02/03/iostat.html

  6. 深入理解JavaScript系列+ 深入理解javascript之执行上下文

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...

  7. eclipse下修改项目名导致tomcat内发布名不一致的解决方法 .

    eclipse下修改项目名导致tomcat内发布名不一致的解决方法 . ------------------------------------------------------- 解决方案: 直接 ...

  8. (原创)speex与wav格式音频文件的互相转换(二)

    之前写过了如何将speex与wav格式的音频互相转换,如果没有看过的请看一下连接 http://www.cnblogs.com/dongweiq/p/4515186.html 虽然自己实现了相关的压缩 ...

  9. mysql中查询某字段所在的表方法

    select TABLE_NAME from information_schema.COLUMNS where COLUMN_NAME = 'type'

  10. java Spring bean作用域

    1. Singleton作用域 当一个bean的作用域为singleton, 那么Spring IoC容器中只会存在一个共享的bean实例,并且所有对bean的请求,只要id与该bean定义相匹配,则 ...