隐藏在背景后面的css元素

我有这个问题，div没有显示。代码很简单，只是测试：隐藏在背景后面的css元素

<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元素。

问候，

来源

2013-03-12 sys_debug

我们无法在您的示例中看到背景图像，因为它在本地是 – 2013-03-12 21:06:03

尝试使用'position'和'float'玩 – greener 2013-03-12 21:06:36

您没有任何内容或背景或边框颜色设置，所以没有任何渲染。添加'背景：＃F00;'到你的第二个div，你会看到它。 _我已添加它作为答案，因为一些不正确的东西进来了.._ – rgthree 2013-03-12 21:07:05

我会使用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-12 21:07:29

添加position: relative和z-index: 9999;你希望看到在顶部的股利。

来源

2013-03-12 21:06:47

也许只是z -index：1开始？ – 2013-03-12 21:08:39

是的，我只是投入了大量的时间才确定。但从一开始。 – 2013-03-12 21:10:17

使用大量数字确保下一个人仍然需要使用更大的数字:) – GregRos 2016-09-28 15:52:09

你的第二个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-12 21:08:54 rgthree

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

来源

2013-03-12 21:12:53

隐藏在背景后面的css元素

回答

相关问题