I have a fixed div with a max-height, an overflow-y: auto and an overflow-x: hidden.
<div id="overlay"> <!-- position:fixed; -->
<div class="close" >×</div> <!-- position:absolute; NOT WORKING -->
<div id="overlay-content"> CONTENT HERE </div>
</div>
<div id="mask"></div> <!-- another position:fixed; -->
I want to add a layer on top of my id="overlay" called class="close" and it's not going over.
If I put the following code
max-height: 50%;
height:auto !important;
overflow-y:auto;
overflow-x:hidden;
inside #overlay-content instead of inside #overlay then the (X) Circle appears on top, but the max-height and the overflow-y: auto doesn't work anymore...
JSFIDDLE: https://jsfiddle.net/g5Lt5oak/8/
You'll see the problem with the (x) circle not going over the FIX div. How can I fix this?
#mask { /* create are mask */
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 1;
width: 100%;
height: 100%;
display: block;
}
#overlay {
width: 65%;
margin: 0;
padding: 10px;
position: fixed;
top: 10%;
left: 17%;
z-index: 2;
display: block;
background: white;
max-height: 50%;
height: auto !important;
overflow-y: auto;
overflow-x: hidden;
}
#overlay-content {
/* max-height: 50%;
height: auto !important;
overflow-y: auto;
overflow-x: hidden;
*/
}
.close {
display: block;
position: absolute;
top: -20px;
right: -14px;
background: #d1d1d1; /*#b1b1b1; */
color: white;
height: 45px;
width: 45px;
line-height: 45px;
font-size: 40px;
text-decoration: none;
text-align: center;
font-weight: bold;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
z-index: 10;
}
.close: hover {
cursor: pointer;
cursor: hand;
}<div id="overlay">
<div class="close">×</div>
<div id="overlay-content">
<br><img src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg"><br><br>
<br><img src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg"><br><br>
<br><img src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg"><br><br>
</div>
</div>
<div id="mask"></div>