Позиционирование абсолютного div над фиксированным div со специальным переполнением

Question

У меня есть фиксированный div с max-height, overflow-y: auto и overflow-x: hidden.

<div id="overlay"> <!-- position:fixed; --> 

    <div class="close" >&times;</div> <!-- position:absolute; NOT WORKING --> 

    <div id="overlay-content"> CONTENT HERE </div> 
</div> 

<div id="mask"></div> <!-- another position:fixed; --> 

Я хочу, чтобы добавить слой поверх моего id="overlay" называется class="close" и это не будет закончена.

Если я ставлю следующий код

max-height: 50%; 
height:auto !important; 
overflow-y:auto; 
overflow-x:hidden; 

внутри #overlay-content вместо внутри #overlay тогда на вершине появляется (X) Circle, а максимальная высота и overflow-y: auto больше не работает ...

JSFIDDLE: https://jsfiddle.net/g5Lt5oak/8/

Вы увидите проблему с (х) круг не переходя FIX дел. Как я могу это исправить?

#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; \t 
 
} 
 

 
#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">&times;</div> 
 
    <div id="overlay-content"> \t \t 
 
    <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>

Answer 1

Просто оберните положение абсолютного DIV с относительным положением DIV. Также установите ширину изображений внутри содержимого наложения до 100% и удалите первый тег строки прерывания.

<style> 
.overlay-content img{ 
width:100%; 
} 
</style> 
<div id="overlay"> 
<div style="position:relative"> 
<div class="close">×</div> 
<div id="overlay-content">  
<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>