Question

这是我的code：

<div id="first">
    <div id="first-internal">&nbsp;</div>
</div>

<div id="fixed">&nbsp;</div>

#first
{
    position:relative;
}

#first-internal
{
    position:relative;
    z-index:100;
    background-color:blue;
    width:400px;
    height:400px;
}

#fixed
{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    background-color:red;
    z-index:41;
}

为什么我看不到#fixed？它在#first之后，因此它必须具有更多的“z-index点”，然后是#first。必须显示#fixed的内容（如果#first的孩子有z-index:9000）。

Answer 1

具有更大z-index的块应始终位于顶部。如果您阅读the spec，您可以看到放置一个z-index将创建一个新的堆栈上下文，这意味着它将基本上在具有较小z-index的其他层之上创建一个层，无论顺序如何HTML或css。

因此，在您的情况下，＃fixed的z-index低于＃first-internal，所以#first-internal位于顶部。这就是全部;）

顺便说一句，这个堆栈上下文在IE中实现得很糟糕，它会采取不同的行动。

Answer 2

stacking contexts与css visual formatting model documentation相关联。在body：

的背景下

#first（没有z-index）~~有资格作为堆栈级别为0的定位后代~~此元素不启动新的堆叠上下文（详见下文）
#fixed（z-index＆gt; 0）具有正的堆栈级别并呈现更高的

~~因此，无论您设置#first decsendants的z-index有多高，它们仍然会相对于#first~~

保持在较低的堆栈中

~~这些行为与第6层和第6层相同。分别为7，如链接文档中所述。~~

更新

我总是发现MDN docos更容易理解。基本上#first 无法启动新的堆叠上下文（它相对定位，但它具有默认的z-index:auto）。

这意味着#first-internal和#fixed在同一堆叠上下文中呈现，而具有更高z-index的呈现在顶部！这是第6层行为，如原始规范中所述。

Answer 3

当您向position:absolute创建元素时，它不占用文档中的任何空格。相反，它表现得像浮动一样。它是HTML / CSS的基本特性，position:absolute个对象比z-index小position:relative。

这是因为position:relative个对象有自己的存在，它不会像absolute元素那样浮动。

我在下面发布了一些链接，您可以对这两个属性进行简短的研究：

希望这能澄清您的疑问。

为什么这个z-index行为？

3 个答案:

更新