css的层叠

css2的css的层叠

《css世界》的读书笔记，非原创。背景是css2。

z-index只是层叠规则中的一个属性

z-index属性只有和定位元素（position不为static的元素）在一起的时候才有用，可以是正数也可以是负数。理论上说，数值越大层级越高，但实际上会更复杂。

但是对于css3的新属性，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性。

理解css的层叠上下文和层叠水平

层叠上下文

英文为：stacking context，是HTML中一个三维的概念。如果一个元素含层叠上下文，我们可以理解为这个元素在z轴“高人一等”。

这里有个z轴，表示的是用户与显示器之间看不见的垂直线。

image

我们可以把层叠上下文理解成一个小的结界，这个世界可以嵌套其他结界，也可以被其他结界嵌套。

我的理解就是父元素有z-index属性时，其子元素的层叠水平就只能在父元素里面比较了。

层叠水平

英文为：stacking level，决定了层叠上下文中元素在z轴的显示顺序。数值越高在z轴显示顺序越前。

在css中，所有元素都有层叠水平。然而对于普通元素来说，它的层叠水平被限制在当前层叠上下文元素中。因为层叠上下文本身就是一个强力的“结界”，普通元素是无法突破这个结界去跟结界外的元素去比较的。

这里需要注意的是，z-index只是可以影响元素的层叠水平而已，但也只限于定位元素和flex盒子的孩子元素。所有元素都有层叠水平。

理解元素的层叠顺序

英文为：stacking order，表示元素发生层叠时有着特定的 垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。

image

1)位于最下面的 background/border 特指层叠上下文元素的边框和背景色。每一个 层叠顺序规则仅适用于当前层叠上下文元素的小世界。

(2)inline水平盒子指的是包括inline/inline-block/inline-table元素的“层 叠顺序”，它们都是同等级别的。

(3)单纯从层叠水平上看，实际上 z-index:0 和 z-index:auto 是可以看成是一样的。注 意这里的措辞— “单纯从层叠水平上看”，实际上，两者在层叠上下文领域有着根本性的差异。

层叠准则

下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则:

(1)谁大谁上:当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

(2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

层叠上下文的特性

层叠上下文元素有如下特性：

• 层叠上下文的层叠水平要比普通元素高。

• 层叠上下文可以阻断元素的混合模式(参见 http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明)。

• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。

• 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。

• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。