かかってこいよ NakamuraEmi
  1. 1 かかってこいよ NakamuraEmi
  2. 2 BREAK IN TO BREAK OUT Lyn
  3. 3 Time Bomb Veela
  4. 4 Libertus Chen-U
  5. 5 One Last You Jen Bird
  6. 6 Life Will Change Lyn
  7. 7 Hypocrite Nush
  8. 8 Flower Of Life 发热巫女
  9. 9 Warcry mpi
  10. 10 Last Surprise Lyn
2017-01-15 12:16:14

解析CSS中的层叠规则

先看这样一个例子。

当上层的a浮动后,覆盖了下层的b。但当给b添加一个相对定位后,又覆盖了上层的a。

为什么一个relative定位属性就可以改变元素叠加的顺序呢?实际上就是元素的层叠规则在作怪。层叠规则就是CSS中的元素叠加后在视觉上谁上谁下的规则。为了深入理解这个规则,我们就从层叠顺序的应用范围——层叠上下文说起。


层叠上下文

概念

大家都知道,一张HTML页面从视觉效果上来看就是一个二维平面。和photoshop的图层类似,这张二维平面就类似于一张画布,画布上充斥着各种各样的图层,图层之间必然会有重叠。那么当图层重叠时,谁上谁下就必须有个规则来定义。这个规则就是层叠规则。而这些图层就是层叠上下文中的元素,画布就是层叠上下文。画布中又可以添加新的画布,此时新的画布中的元素同样适用层叠规则。但新的画布包括其内部的元素,依然要遵守该层画布所处画布的层叠规则。

总的来说,层叠上下文就是一个区域,HTML中可以有多个相互独立的区域,每个区域内都应用着同一套层叠规则来决定元素的层叠关系。

创建方法

根层叠上下文

HTML中只要存在元素就必然离不开层叠关系的说明,所以html标签就会创建第一个也是最上层的根层叠上下文。

定位相关层叠上下文

当元素具有position定位属性并且z-index不为auto时,创建层叠上下文。position为fixed时直接创建层叠上下文。

CSS3相关层叠上下文

1.z-index值不为auto的flex项(父元素display:flex|inline-flex). 2.元素的opacity值不是1. 3.元素的transform值不是none. 4.元素mix-blend-mode值不是normal. 5.元素的filter值不是none. 6.元素的isolation值是isolate. 7.will-change指定的属性值为上面任意一个。 8.元素的-webkit-overflow-scrolling设为touch.


层叠规则

好了,我们可以看到,层叠上下文实际上就是一个元素创建的。从HTML根元素开始对其下每个元素应用根元素范围的层叠规则。当子元素创建层叠上下文时,在子元素遵守根元素层叠规则的同时,子元素的子元素应用新的层叠规则决定在子元素中的层叠顺序,以此类推,最终就决定了整个文档的元素视觉表现。

现在我们了解了整套体系的作用规则,可以具体来探究层叠规则具体是什么了。这里引用张鑫旭大神的一张总结图。

2016-01-09_211116.png-17.5kB

现在来看文章开头的那个例子就好解释了。a和b是属于根层叠上下文的两个元素,应用于根层叠上下文规则,当b不添加relative时为块状水平盒子,层叠顺序低于浮动盒子。当b添加relative后为z-index为auto。层叠顺序高于浮动盒子。

另外需注意,当同一层叠上下文中的层叠顺序相同时,DOM流后面的元素会覆盖前面的元素。

了解了以上规则,在页面布局中就可以尽可能的减少z-index,定位和浮动的滥用了。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「CSS」「HTML」 标签。