有趣的 CSS 题目（3）：层叠顺序与堆栈上下文知多少

最新推荐文章于 2020-12-22 12:21:24 发布

转载最新推荐文章于 2020-12-22 12:21:24 发布 · 289 阅读

css 专栏收录该内容

9 篇文章

订阅专栏

本文详细探讨了CSS中层叠顺序与堆栈上下文的概念，通过实例对比了不同元素类型在层叠显示上的差异，并介绍了如何通过特定属性创建堆栈上下文。

层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？

z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。

看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下：

<div class="container">

<div class="inline-block">#divA display:inline-block</div>

<div class="float"> #divB float:left</div>

</div>

它们的 CSS 定义如下：

.container{

    position:relative;

    background:#ddd;

}

.container > div{

    width:200px;

    height:200px;

}

.float{

    float:left;

    background-color:deeppink;

}

.inline-block{

    display:inline-block;

    background-color:yellowgreen;

    margin-left:-100px;

}

大概描述起来，意思就是拥有共同父容器的两个 DIV 重叠在一起，是 display:inline-block 叠在上面，还是float:left 叠在上面？

注意这里 DOM 的顺序，是先生成 display:inline-block ，再生成 float:left 。当然也可以把两个的 DOM 顺序调转如下:

<div class="container">

<div class="float"> #divB float:left</div>

<div class="inline-block">#divA display:inline-block</div>

</div>

会发现，无论顺序如何，始终是 display:inline-block 的 div 叠在上方。

Demo戳我（http://codepen.io/Chokcoco/pen/gwLYNy）。

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以无论 DOM 的先后顺序都堆叠在上面。

不过上面图示的说法有一些不准确，按照 W3官方的说法，准确的 7 层为：

the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).

稍微翻译一下：

形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 div 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 div 都没有形成堆叠上下文这个为基础的。下面我们修改一下题目，给两个 div ，增加一个 opacity:

.container{

    position:relative;

    background:#ddd;

}

.container > div{

    width:200px;

    height:200px;

    opacity:0.9; // 注意这里，增加一个 opacity

}

.float{

    float:left;

    background-color:deeppink;

}

.inline-block{

    display:inline-block;

    background-color:yellowgreen;

    margin-left:-100px;

}