Html 使用特殊溢出将绝对div定位在固定div上

我有一个固定的

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;  -->

在

#覆盖内容

内部，而不是在

#覆盖

内部，然后（X）圆圈出现在顶部，但最大高度和

溢出-y:auto

不再起作用

JSFIDDLE：

您将看到（x）圆没有越过FIX div的问题。我如何解决这个问题

#掩码{/*创建是掩码*/
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.6）；
z指数：1；
宽度：100%；
身高：100%；
显示：块；
}
#覆盖{
宽度：65%；
保证金：0；
填充：10px；
位置：固定；
排名前10%；
左：17%；
z指数：2；
显示：块；
背景：白色；
最大高度：50%；
高度：自动！重要；
溢出y：自动；
溢出x：隐藏；
}
#覆盖内容{
/*最大高度：50%；
高度：自动！重要；
溢出y：自动；
溢出x：隐藏；
*/
}
.结束{
显示：块；
位置：绝对位置；
顶部：-20px；
右图：-14px；
背景：#d1d1d1；/*#B1B1*/
颜色：白色；
高度：45px；
宽度：45px；
线高：45px；
字体大小：40px；
文字装饰：无；
文本对齐：居中；
字体大小：粗体；
-webkit边界半径：40px；
-moz边界半径：40px；
-o-边界半径：40px；
边界半径：40px；
z指数：10；
}
.关闭：悬停{
光标：指针；
光标：手；
}

&时代；

只需用位置相对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> 

.叠加内容img{
宽度：100%；
}
×

只需用位置相对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> 

.叠加内容img{
宽度：100%；
}
×