Question

我有一个包含3个元素的页面。一个在中心，有一个很好的背景图像;覆盖在这上面的是第二个div，它有一个黑色的半透明背景，可以更好地读取里面的文字。

除此之外，我还有一个带有完全白色背景的浮动div。

由于一些奇怪的原因，当浮子覆盖半透明div时，半透明的背景似乎渗透到浮子中。

我的HTML + CSS来演示我的问题。如果您使浏览器窗口变小，右侧浮动将向中心div移动。它将正确保持红色，除了它击中alpha-inset的地方。

为什么？

<!doctype html>
<head>
<style type="text/css">
#centerDiv {
   height: 300px;
   width: 900px;
   margin: 0px auto 0px auto;
   padding: 0 0;
   background-color: green;
}
#centerInset {
   width: 100%;
   background-color: rgba(0,0,0,0.3);
   position: relative;
   top: 225px;
   height: 74px;
   color: white;
}
#floater {
   float: right;
   width: 200px;
   height: 300px;
   border: 1px solid;
   clear: both;
   background-color: rgba(250,0,0,1);
   border: 1px solid black;
}
</style>
</head>
<body>
<div id="floater">
   <span>some floating text</span>
</div>
<div id="centerDiv">
   <div id="centerInset"><span>Some random text</span></div>
</div>
</body>
</html>

Answer 1

您需要添加z-index + position才能使z-index正常工作 - ＆gt; jsfiddle

Answer 2

我不确定但它可能是这样的：当你使“centerInset”相对时，z-index相对于第一个具有静态位置的父元素。

如果你使“centerDiv”位置相对，它会像你期望的那样工作。

为什么半透明背景在不同的div中闪耀

2 个答案: