CSS进阶10-分层显示

love丁酥酥

发布于 2018-08-27 15:30:44

1.2K0

发布于 2018-08-27 15:30:44

文章被收录于专栏：coding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 重叠与覆盖

前面我们一直提到，不同的元素产生的盒有可能发生重叠，那么在这种情况下，哪个盒子会最终展示给用户看呢？在CSS入门系列文章 CSS入门11-定位与覆盖中我们对不同元素生成的盒的重叠情况作了比较与分析，讲到了z-index属性，这一节我们引入两个新的关键词，堆叠级别stack level和堆叠上下文stack context。

注：这里stack我翻译成了堆叠，没有翻译成堆栈或者层次。你也可以翻译为层叠级别和层叠上下文（这里的层叠和CSS入门系列中提到的三大特性之层叠性是有区别的，准确说那里的层叠性是指选择器的层叠性），或者堆栈级别和堆栈上下文，这点取决于你的理解和习惯。这也是我对一些名词经常会直接使用英文的原因，避免歧义。

2. 堆叠上下文 stack context 和堆叠级别 stack level

在CSS 2.2中，每个盒都有三个维度的位置。除了它们的水平和垂直位置之外，盒子还会沿着一个“z轴”放置，并且一个在另一个的顶部。盒子在在视觉上的重叠效果显示与Z轴位置相关。

堆叠上下文用以描述渲染树rendering tree被绘制到画布上的顺序。堆叠上下文可以包含更多堆叠上下文。从其父级堆叠上下文的角度来看，堆叠上下文是原子的。其他堆叠上下文中的盒子不能出现在该堆叠上下文的任何盒子之间。

如图：堆叠上下文1 (Stacking Context 1)是由文档根元素形成的。堆叠上下文2和3 (Stacking Context 2, 3) 都是堆叠上下文1 (Stacking Context 1) 上的堆叠层。他们各自也都形成了新的堆叠上下文，其中包含着新的堆叠层。

每个盒子都属于一个堆叠上下文。在给定堆叠上下文中的每个定位框都有一个整数的堆叠级别，通过与同一堆栈上下文中其他盒子堆栈级别比较得出其在z轴的位置。具有较高堆叠级别的盒始终格式化在较低堆叠级别的盒之前（“在...之前”表示“在用户面对屏幕时更靠近用户”）。盒子可能有负的堆叠级别。根据文档树的顺序，在堆叠环境中具有相同堆叠级别的盒按照先后顺序堆叠。

根元素形成根堆叠上下文。其他堆叠上下文由具有非'auto'的'z-index'计算值的任何定位元素（包括相对定位元素）生成。堆叠上下文不一定与包含块有关。在未来CSS级别中，其他属性可能会引入堆叠上下文，例如“ 不透明度opacity ” [CSS3COLOR]。

3. z-index属性

z-index

对于一个定位盒positioned box，属性z-index用于指定：

当前堆叠上下文中盒的堆叠级别。
该盒是否会创建堆叠上下文。

z-index取值有如下含义：

<integer> 此整数是当前堆叠上下文中生成的盒的堆栈级别。该盒还创建了一个新的堆叠上下文。
auto 当前堆栈上下文中生成的盒的堆栈级别为0。如果该盒具有'position：fixed'或者它是根，那么也会创建一个新的堆叠上下文。

4. 堆叠顺序

在每个堆叠上下文中，以下图层按照从后到前的顺序进行绘制：

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).

在每个堆叠上下文中，绘制堆栈级别为0（在层6中），未定位的浮动（第4层），行内块（第5层）和行内表（第5层）中的定位元素，就好像这些元素本身产生了新的堆叠上下文，除了它们的定位后代和任何可能的子堆叠上下文也参与当前的堆叠上下文。

注：关于这篇文章的知识点，我推荐大家阅读前端大神张鑫旭的这篇blog深入理解CSS中的层叠上下文和层叠顺序