Question

我遇到了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元素突出显示它。

此致

Answer 1

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

Answer 2

我使用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>

Answer 3

你的第二个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一个更高的实际值。

Answer 4

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

隐藏在背景后面的css元素

4 个答案: