切图系列：W3C奇技淫巧之层叠上下文

pcChao 发布于2019-08-28 18:26 / 2927人阅读

摘要：同一个层叠上下文中，层叠级别相同的两个元素，依据它们在文档流中的顺序，写在后面的将会覆盖前面的。因此，元素的层叠关系不仅与它在堆叠上下文中所属的层叠级别有关，还与它所在的堆叠上下文的顺序有关。

w3c规范里的stacking context，译作层叠上下文，最主要的作用还是用来比较一个拥有定位元素（position:!static）的元素的z轴层叠关系（z-index）。

先上一个经典的例子：

http://jsbin.com/pupibo/11/edit][1]

代码：

html:

  A z-index:1;
  B
  C

css

#a,#b,#c{
  position:absolute;
  width:200px;
  height:100px;
}
#a{
  left:20px;
  top:20px;
  background:yellow;
  z-index:1;
}
#b{
  left:50px;
  top:50px;
  background:pink;
}
#c{
  left:80px;
  top:80px;
  background:cyan;
}

效果：

问题：在不给#b #c设置z-index的情况下，如何让#a置于其他两者的后面？

答案你知道的，给包裹#a的div增加样式：

  div:first-of-type{
    opacity:0.9999;
  }

其实这里就涉及到堆叠上下文的概念了。context这个名词在css相关规范里见得多了，最著名的有块级格式上下文（block formatting context）。那么什么是上下文（context）呢？按我的理解，应该是某种类似环境的东西，一旦一个元素被加入一个context，他们的某些属性值会放在一起比较，最终的比较结果会影响到他们的视觉呈现。

而处于同一个堆叠格式上下文内的元素，它们会相互比较自己在z轴叠放的顺序，从而知道谁应该在谁的上面、谁应该在谁的下面（贵圈真乱 (。・д・。) ）：

同一个层叠上下文中，层叠级别（即z-index属性值）大的显示在上面，反之显示在下面。

同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。

那么问题来了，可不可能产生一个新的层叠上下文？

当然可能，根据规范，以下情况将会产生一个新的层叠上下文：

当一个元素是文档的根元素时，在完整的html文档里，根元素是html标签；

当元素拥有一个值为非static的position且拥有一个值为非auto的z-index样式时；

当元素拥有一个值小于1的opacity样式时；

当元素拥有一个值不为none且有效的transform样式时；

当元素拥有一个值为display:flex|inline-flex的样式且z-index不为auto时；

当元素拥有一个值不为normal的mix-blend-mode样式时；

当元素拥有一个值为isolate的isolation样式时；

当元素的will-change样式指定为上述任意一个值时；

在移动端，当元素拥有一个值为touch的-webkit-overflow-scrolling值时；

当元素的filter（此处为CSS3的滤镜）值不为none时；

在 IE6,7 下，当元素拥有一个值为非static的position的样式时，即使z-index未定义。

因此，元素的层叠关系不仅与它在堆叠上下文中所属的层叠级别有关，还与它所在的堆叠上下文的顺序有关。这就是上面例子的全部秘密。而前文中的例子，其实还有另一种方法，对，给div:first-of-type添加transform:transform-function样式。

最后，看到特地给ie6/7加粗的那条了吗？嗯，这就是ie6/7那个著名bug的根源，具体bug解剖请看张鑫旭大大2009年的一篇文章：ie6下z-index犯癫不起作用bug的初步研究，或者@doyoe的这个简单的demo。

最后附上这道题答案的效果：

http://jsbin.com/pupibo/12

效果图：

云服务器 GPU云服务器系列之系列之二架构之坑系列奇技

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111232.html

【Hello CSS】第六章-文档流与排版

摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。作者：陈大鱼头 github： KRISACHAN 正常流什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

nihao 2019-08-02 15:35 评论0 收藏0
【Hello CSS】第六章-文档流与排版

摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。作者：陈大鱼头 github： KRISACHAN 正常流什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

null1145 2019-08-30 11:27 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0