微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

什么是 CSS 层叠上下文,它们是如何工作的?

2016-02-25 19:52 前端大全

(点击上方,可快速关注)

原文:Tiffany B. Brown

作者:伯乐在线 - Eric.M.Y.H

网址:http://web.jobbole.com/84915/


CSS层叠上下文给很多开发者都带来过困扰。在我写完《CSS Master》中的布局章节之前,我都不能说自己已经完全理解了它们。当然了,我理解元素的 z-index 属性是需要 position 属性不为 static 时才能生效的,但这也是在我读了无数次Philip Walton 的《没有人告诉你关于 Z-Index 的一些事》之后才理解了。


没有冒犯 Philip 的意思。就像我说过的:层叠上下文很棘手。


那什么是层叠上下文呢?层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个 html 元素创建的根层叠上下文,或者是一个由特定属性和值创建的局部层叠上下文。


“包含一堆层”是一个很奇怪的短语,但这是一个简单的概念。在一个局部层叠上下文中,子元素的z-index 会根据其父元素来设置而不是文档的根元素。在该上下文以外的层(例如:一个局域层叠上下文的相邻同级元素)不能位于其内部层之间。


这儿是一个例子。使用切换按钮来为 A 元素触发或者取消一个局域层叠上下文。



在这个例子中,#a p 元素(A的子元素) 的z-index为1 ,#a 元素和 #b 元素的z-index值为auto 。因为 #a p 元素的 z-index 属性值为正数,所以在根层叠上下文内该元素位于 #a 元素和 #b 元素之上。


然而把 #a 元素的 transform 属性值由 none 改为 scale(1) 会触发一个局域层叠上下文。现在 #a p 元素的 z-index 值会根据 #a 元素来计算而不是文档的根元素。


无论是根层叠上下文还是局域层叠上下文都会遵循一系列的规则来确定元素的堆叠和绘制顺序,一个层叠上下文的子元素会按照从下到上的顺序绘制。


1. 堆叠层级为负数的元素,通常为 z-index:-1 的元素 。

2. position 属性值为 static 的元素。

3. 堆叠层级为 0 的元素,通常为 z-index:auto 的元素。

4. 堆叠层级为正数的元素,例如 z-index 属性值为 1 或者更大的元素。


如果两个元素有相同的堆叠层级,就按照它们在源文件中出现的顺序层叠。后继元素堆叠在前驱元素之上。


少数的 CSS 属性和值会触发一个新的层叠上下文。它们包含: opacity 属性,当它的属性值小于 1 时(例如:.99);

filter 属性,当它的属性值不为 none 时;CSS 混合模式属性 mix-blend-mode, 当它的属性值不为 normal 时。


和你猜想的一样,transform 属性能够触发一个层叠上下文,但是仅当它的属性值不为 none 时。这包含了身份转换[1] ,例如属性值为 scale(1) 和 translate3d(0,0,0) 。


在上述例子中,#a 元素和 #b 元素拥有相同的堆叠层级,但是 #b 元素是源文件中的第二个元素。当 transform: scale(1) 被应用时, #a p 变为包含在 #a 元素的局部上下文中。结果是,#b 元素上升到了堆栈的最上面。


[1] 身份转换对元素没有视觉上的影响,但是会触发一个新的层叠上下文。



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 细说ASP.NET Core与OWIN的关系 android的消息处理机制(图+源码分析)——Looper,Handler,Message 美丽的数据 :数据可视化与信息可视化浅谈 从输入 URL 到页面加载完成的过程中都发生了什么事情?(上) 女朋友都学的会,5分钟学会网页样式