关于z-index的那些事儿

关于z-index的那些事儿

现 在似乎更清晰了，关于为什么红色盒子跑到其他盒子的后面。原始的例子只包含两个堆栈上下文，根元素和形成span.red的那个。当我们添加 opacity到span.red的父节点上，形成了第三个堆栈上下文，结果显示在span.red上的z-index值只能应用在那个新的堆栈上下文 中。因为第一个<div>（应用opacity的那个）和它的兄弟元素没有position或者z-index值的集合，他们的堆栈顺序是由 他们在HTML里的源顺序决定的，也就是说第一个<div>，和它的堆栈上下文里的所有元素被第二个和第三个<div>元素分 离。

3.2. Transparency: the ‘opacity’ property - 無法在一個 stacking context 插入一個外來的 layer

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

CSS 定位之 z-index 问题分析

可以这样理解：定位树中包含了 DOM 树中 position 不为 staitc 的全部元素. 而非同级元素比较层级关系可以比较如下. 向上遍历定位树的父节点直到 2 个元素为同级元素. 根据上面的结论来最最后的比较, 层级高的元素会越靠近用户的显示器并能覆盖层级低的元素

via: What has bigger priority: opacity or z-index in browsers?

ref: CSS z-index 属性的使用方法和层级树的概念