0

这是我的代码：

<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（即使是#firsthave的子级）的内容。z-index:9000

4

3 回答 3

2

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

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

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

于 2012-06-21T07:49:40.033 回答
1

这都是关于在css 视觉格式化模型文档中链接到的堆叠上下文。n 的上下文：body

  • #first（无 z 索引）有资格作为堆栈级别为 0 的定位后代此元素不会启动新的堆叠上下文（详见下文）

  • #fixed(z-index > 0) 具有正堆栈级别并呈现更高

因此，无论您将后代的 z-index 设置#first多高，它们仍将保留在相对于#first

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

更新：

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

这意味着#first-internal和#fixed渲染在相同的堆叠上下文中，具有较高 z-index 的渲染在顶部！这是第 6 层行为，如链接的原始规范中所述。

于 2012-06-21T08:19:34.660 回答
-1

当您创建一个元素时，position:absolute它不会占用文档中的任何空间。相反，它表现得好像它的浮动。并且它的 HTML/CSS 的基本性质是position:absolute对象z-index小于position:relative.

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

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

希望这可以澄清您的查询。

于 2012-06-21T08:02:50.900 回答