2

我在没有显示 div 的地方遇到了这个问题。代码很简单，仅在测试：

<html>
<head>
    <title>Main</title>

    <style>
        .simple-div {
            -moz-border-radius: 15px;
            border-radius: 15px;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;">
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">

    </div>

    <div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;">

    </div>

</body>
</html>

如何将第二个 div 保持在背景图像上方？它目前没有显示在屏幕上，但我可以通过 chrome 使用 Inspect 元素看到它在后面突出显示。

问候，

4

4 回答 4

3

将position: relative和添加z-index: 9999;到您希望在顶部看到的 div 中。

于 2013-03-12T21:06:47.800 回答
3

我会使用 position:relative 或 position:absolute，在两个 div 上都有一个 z-index。

<div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index: 0; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
</div>

<div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px; position: relative; top: 0; left: 0; z-index: 15; background-color:#ff0000;">
    test
</div>
于 2013-03-12T21:07:29.933 回答
1

您的第二个 div 不包含任何内容，也不包含背景、边框等，因此屏幕上没有任何可见的显示。它就在那里，它在你的身体背景之上。

如果您还打算将它显示在上面的固定元素之上，则需要它z-index更高。你需要给它一个position不static让它使用的z-index（在这里，我们将使用relative）：

<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;">
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index:1; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">

    </div>

    <div style="background:#F00; position:relative; z-index:2; -moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;">

    </div>

</body>

请注意，在这个特定示例中，z-index可以相等，因为它们在同一个堆叠父级中，并且固定 div 是第一个。但是，我发现最好更明确一些，并给第二个 div 一个实际更高的值。

于 2013-03-12T21:08:54.647 回答
0

一个选项取决于您的目标是添加position:absolute到第二个 div 的样式属性。

于 2013-03-12T21:12:53.420 回答