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 here：http://jsfiddle.net/z7hemun3/9/

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

有一会儿，上面似乎违反了我从这个小提琴中学到的东西：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);
}

我从第二个小提琴得到的教训是，即使父元素的z-index小于父元素，子元素也总会显示在父元素之上。

Answer 1

我不会像计算这些索引的方式那样解决特定算法。

在第一个示例中，三个（红色，绿色和蓝色）div（1-3）是嵌套（子）元素到（父）div0元素。

Z-Indexing与相对关于最近的定位父元素。

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

一旦考虑了嵌套，div0就是69.但是，关于它的 children ，div处于z-index 0，因为它现在是相对定位的元素。子节点的默认（0），5和10的z-index都叠加在父div0之上。相对于div0，它们比它高0,5和10。相对于div0的父级，它们高于它的69,74和79.

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

1 个答案: