css - 浏览器用来处理 z-index 的算法是什么？

Question

有人可以提供浏览器用来处理 z-index 的算法/伪代码吗？我似乎总是遇到一些极端情况，在使用 z-index 时，我的期望不符合观察到的行为。我认为理解 z-index 的最好方法可能是研究浏览器用来处理它的算法。我认为算法会是这样的:

render(Node n)
{
    var contexts = [n.stackingContext]; // initialize by creating a single root context
    for(var child in n.children)
    {
        if (child has a z-index set using either z-index:number or z-index:inherit)
        {
            create new stacking context with z-index = z-index above and
            insert this stackingContext into appropriate position in contexts such that
            contexts is always sorted in increasing order of z-index
        }
    }
    for(var context in contexts)
    {
        for(var node in context.nodes) // context.nodes returns nodes in increasing order of z-index
        {
            render(node);
        }
    }
}

并且该方法将像 render(document.body) 一样调用以呈现整个 DOM，但是当我在下面的示例中运行上面的伪代码时，它不会给出预期的结果:

例如，W.r.t.这段代码:

HTML:

<div id="div0">
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
</div>    

CSS:

div
{
    width:100px;
    height:100px;
    position:absolute;
}

#div0
{
z-index:69;    
}

#div1
{
    top:0;
    left:0;
    background:rgba(0,0,255,0.8);
}

#div2
{
    top:20px;
    left:20px;
    z-index:10;
    background:rgba(0,255,0,0.8);
}

#div3
{
    top:10px;
    left:10px;
    z-index:5;
    background:rgba(255,0,0,0.8);
}

js fiddle 在这里:http://jsfiddle.net/z7hemun3/9/

我希望 div3 位于顶部，因为它将创建一个新的堆叠上下文，而 div1 将共享其父级的堆叠上下文，而子级的堆叠上下文(在本例中为 div3)出现在父级的堆叠上下文之上( div0 是 div3 的父级)。但是，div2 出现在顶部，然后是 div3，然后是 div1。 所以看起来 div2 和 div3 的堆栈上下文相互竞争，即使 div2 和 div3 在 dom 树中处于不同级别。

一会儿，上面似乎违反了我从这个 fiddle 中学到的东西:http://jsfiddle.net/z7hemun3/5/

<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
</div>


div
{
    width:100px;
    height:100px;
    position:absolute;
}

#div1
{
    top:0;
    left:0;
    z-index:10;
    background:rgba(255,0,0,0.8);
}

#div2
{
    top:10px;
    left:10px;
    z-index:1;
    background:rgba(0,255,0,0.8);
}

#div3
{
    top:20px;
    left:20px;
    background:rgba(0,0,255,0.8);
}

我从 second fiddle 得到的教训是，子元素将始终显示在父元素之上，即使它的 z-index 小于父元素的 z-index。

Answer 1

我不打算详细介绍具体的算法，而是介绍这些指标的计算方式。

在您的第一个示例中，三个(红色、绿色和蓝色)div (1-3) 是(父)div0 元素的嵌套(子)元素。

Z-Indexing is relative with regards to the closest positioned parent element.

由于您使用了将 position:absolute 应用于每个 div 的 css 指令，因此每个 div 元素都已“定位”。

考虑到嵌套后，div0 位于 69。但是，关于它的 children，div 位于 z-index 0，因为它现在是相对定位的元素。 default(0)、5 和 10 的子级 z-index 都堆叠在父级 div0 之上。相对于div0，分别在它上面0、5、10。相对于 div0 的父级，它们在它上面 69、74 和 79。