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

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

  •  06-10-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top