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"的{{1}}上添加一个图层，但它不会过去。

如果我输入以下代码

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

在#overlay-content内，而不是在#overlay内，然后（X）圈出现在顶部，但最大高度和overflow-y: auto不再起作用...... < / p>

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

你会看到（x）圈没有越过FIX div的问题。我该如何解决这个问题？

＆＃13;

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

＆＃13;

<div id="overlay">
  <div class="close">&times;</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>

＆＃13;

Answer 1

用位置相对div包裹位置绝对div。同时将overlay-content内的图像宽度设置为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>

将绝对div定位在具有特殊溢出的固定div上

1 个答案: