层叠上下文与层叠顺序

20190303-22:47于家中

一旦普通元素具有了层叠上下文，其层叠顺序就会变高。那它的层叠顺序
究竟在哪个位置、哪个级别呢?

ps：个人理解上面这句话：层叠上下文即层叠上下文环境，位于最底层
一旦普通元素进入层叠上下文环境，其层叠顺序会变高。

因此，页面中所有的元素一定处于至少一个“层叠结界”中。

这里需要分两种情况讨论:

(1)如果层叠上下文元素不依赖 z-index 数值，则其层叠顺序是 z-index:auto，可看成 z:index:0 级别;

(2)如果层叠上下文元素依赖 z-index 数值，则其层叠顺序由 z-index 值决定。

我们上面提供的层叠顺序图实际上还缺少其他重要信息。我又花工夫重新绘制了一个更完整的 7 阶层叠顺序图，如图 7-7 所示。

image.png

这下大家应该知道为什么定位元素会层叠在普通元素的上面了吧?其根本原因就是:元素 一旦成为定位元素，其 z-index 就会自动生效，此时其 z-index 就是默认的 auto，也就是 0 级别，根据上面的层叠顺序表，就会覆盖 inline 或 block 或 float 元素。而不支持 z-index 的层叠上下文元素天然是 z-index:auto 级别，也就意味着，层叠上下文元素和定位元素是 一个层叠顺序的，于是当它们发生层叠的时候，遵循的是“后来居上”准则。