我遇到了一个 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 元素看到它在后面突出显示。
问候,
最佳答案
我会使用 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>
关于隐藏在背景后面的css元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15372069/