I am trying to set up a modal where the parent element has a slightly transparent and dark background to highlight the modal object. I want the modal itself to have a black background, but for some reason, it disappears when I do that. I'm curious why this is happening and what steps I need to take to ensure the modal retains its black background.
What I expect
https://i.sstatic.net/GBXPd.png
Working example with a color other than black. working fine
<div id="area" class="area">
<div class="cover"></div>
</div>
.area {
position: relative;
flex: 1 0 auto;
margin: 10px 15px;
padding: 10px;
}
.area .cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
opacity:0.8;
}
.note {
width: 50%;
background: green;
margin: 0px auto;
color: white;
display: flex;
justify-content: center;
margin-top:10%;
border: 1px;
border-radius: 8px;
height: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding:10px;
box-sizing: border-box;
font-size: 2rem;
}<div id="area" class="area">
<h1>lorem ipsum</h1>
<div class="cover">
<div class="note">xx</div>
</div>
</div>Not working when the background-color is black
<div id="area" class="area">
<div class="cover"></div>
</div>
.area {
position: relative;
flex: 1 0 auto;
margin: 10px 15px;
padding: 10px;
}
.area .cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
opacity:0.8;
}
.note {
width: 50%;
background: black; /* not working with black*/
margin: 0px auto;
color: white;
display: flex;
justify-content: center;
margin-top:10%;
border: 1px;
border-radius: 8px;
height: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding:10px;
box-sizing: border-box;
font-size: 2rem;
}<div id="area" class="area">
<h1>lorem ipsum</h1>
<div class="cover">
<div class="note">xx</div>
</div>
</div>