Question

我有一个z索引为-2的a元素和一个z索引为-1的div元素。我希望div元素位于顶部，因为它具有较高的z索引。在Chrome中并非如此。这是Google Chrome浏览器中的错误吗？

编辑：请不要发送有关如何修复它的建议。我想知道为什么它看起来与众不同。

#bar
{
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:100px;
    z-index:-2;
    background:rgba(255,0,0,0.5);
}

#square
{
    position:relative;
    height:150px;
    width:150px;
    z-index:-1;
    background:black;
    margin:200px auto 10000px auto;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="document.getElementById('bar').click()">
        <a id="bar" href="#square">scroll down</a>
        <div id="square"></div>
    </body>
</html>

Screenshot

Answer 1

说实话，我不确定为什么会这样，但是如果使用正值，一切都会按预期进行。

#bar
{
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:100px;
    z-index:1;
    background:rgba(255,0,0,0.5);
}

#square
{
    position:relative;
    height:150px;
    width:150px;
    z-index:2;
    background:black;
    margin:200px auto 10000px auto;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="document.getElementById('bar').click()">
        <a id="bar" href="#square">scroll down</a>
        <div id="square"></div>
    </body>
</html>

Answer 2

问题在于固定位置元素比其他元素具有更高的优先级，请参考Stacking Contexts了解更多信息

这里的jsfiddle链接使用不同的方法来解决问题

#bar
{
    position:sticky;
    top:0;
    right:0;
    left:0;
    display: inline-block;
    width: 100vw;
    height:100px;
    z-index:-2;
    background:rgba(255,0,0,0.5);
}

#square
{
    position:relative;
    height:150px;
    width:150px;
    z-index:-1;
    background:black;
    margin: 0px auto;
}

为什么Chrome和Firefox呈现z-index的方式不同？

2 个答案: