12月06, 2017

层叠上下文

何为层叠上下文?

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生。

三维坐标空间

何为层叠水平?

层叠水平决定了同一层叠上下文中元素在z轴上的显示顺序。也通俗讲就是在z轴上谁层叠水平高谁就在最上面(外面)。(其实是绘制先后,层叠水平高的后绘制,会遮盖先绘制的元素)

需要注意的是:

1. 层叠水平只有在同一层叠上下文中比较才有意义。
2. z-index可以影响定位元素和flex盒子的孩子元素的层叠水平,但它不代表层叠水平,因为所有元素都有层叠水平!

何为层叠顺序?

一个层叠上下文中一共有7种层叠等级:

1. 背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2. 负z-index值 —— 层叠上下文内有着负z-index值的子元素。
3. 块级盒 —— 文档流中非行内非定位子元素。
4. 浮动盒 —— 非定位浮动元素。
5. 行内盒 —— 文档流中行内级别非定位子元素。
6. z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。
7. 正z-index值 —— 定位元素。 层叠上下文中的最高等级。

层叠上下文中的七种层叠等级

  1. z-index:auto和z-index:0的定位元素虽然看上去效果一样,但是有本质区别。(对于z-index为auto的一般定位元素,其只是普通元素,不会创建层叠上下文,所以层叠时要么看子元素层叠水平,要么按"后来居上"原则;对于z-index为0的一般定位元素,自身会创建层叠上下文,从而会影响子元素的层叠显示问题)

  2. inline/inline-block表现的是内容,所以层叠顺序优先,而块状元素和浮动用作布局,则次之。因为网页中最重要的是展示内容。

  3. 背景和边框为创建层叠上下文的元素的,因为他们的内容肯定是覆盖在背景之上的,所以也有层叠关系。

  4. 内联元素还有inline-table

如何创建层叠上下文?

MDN中描述: 文档中的层叠上下文由满足以下任一个条件的元素组成:

* 根元素 (HTML),
* z-index 值不为 "auto"的 绝对/相对定位,
* 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
* opacity 属性值小于 1 的元素(参考 the specification for opacity),
* transform 属性值不为 "none"的元素,
* mix-blend-mode 属性值不为 "normal"的元素,
* filter值不为“none”的元素,
* perspective值不为“none”的元素,
* isolation 属性被设置为 "isolate"的元素,
* position: fixed
* 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章)
* -webkit-overflow-scrolling 属性被设置 "touch"的元素

总结:

  1. 给一个 HTML 元素 定位z-index 赋值 创建一个层叠上下文,(opacity 值不为 1 的也是相同)。
  2. 层叠上下文可以包含在其他层叠上下文中,并且一起创建一个有层级的层叠上下文。
  3. 每个层叠上下文完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
  4. 每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会 在父层叠上下文中 按顺序进行层叠。

来,举例说明:

不设置z-index的层叠

<div style="position: absolute;">div #1</div>
<div style="position: relative;">div #2</div>
<div style="position: relative;">div #3</div>
<div style="position: absolute;">div #4</div>
<div>div #5</div>

1512542818747.png

由于属于同一层叠水平,所以层叠顺序按照“后来居上”原则;

float层叠

<div style="position: absolute;">div #1 absolute</div>
<div style="float:left;">div #2 float-left</div>
<div style="float:right;">div #3 float-right</div>
<div style="position: absolute;">div #4 absolute</div>
<div>div #5 no-position</div>

1512542918972.png

设置了z-index的层叠

<div style="position:absolute; z-index:5;"> div#1 z-index:5 </div>
<div style="position:relative; z-index:3;"> div#2 z-index:3 </div>
<div style="position:relative; z-index:2;"> div#3 z-index:2 </div>
<div style="position:absolute; z-index:1;"> div#4 z-index:1 </div>
<div style="position:static; z-index:8;"> div#5 z-index:8 </div>

1512543022468.png

虽然div#5的z-index值最大,但是由于它不是定位元素(position: relative | absolute),所以它依然在层叠的最下面,因为他是普通元素,不具备层叠上下文。

层叠上下文的实例

未完待续

本文链接:http://westpsk.com/post/the_stacking_context.html

-- EOF --

Comments