Why does a semi-transparent background shine through in a different div

StackOverflow https://stackoverflow.com/questions/21516449

  •  06-10-2022
  •  | 
  •  

문제

I have a page with 3 elements. One in the center, with a nice background image; overlayed onto this, is a 2nd div which has a black semi-transparent background to better be able to read the text inside it.

Aside from that, I also have a floating div with a completely white background.

For some odd reason, when the float overlays the semi-transparent div, the semi-transparent backgound seems to bleed through into the float.

My HTML + CSS to demonstrate my problem. If you make your browser window smaller, the right float will move towards the center div. It will properly stay red, except for the place where it hits the alpha-inset.

Why??

<!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>
도움이 되었습니까?

해결책

You need to add z-index + position to make z-index work -> jsfiddle

다른 팁

I'm not sure but it could be something like that : When you make "centerInset" relative, z-index is relative to the first parent element that has a position other than static.

If you make "centerDiv" position relative, it'll work like you expect.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top