固定位置的弹出窗口的CSS关闭按钮

问题描述：

我想创建一个由JQuery触发的弹出窗口并使用CSS进行样式化。我在框的右上角添加了一个关闭按钮，但是当您在框内向下滚动时（溢出：滚动，由于框的最大高度），X关闭按钮也会滚动，即使定义了绝对位置：固定位置的弹出窗口的CSS关闭按钮

.team-name-popup{ 
position:fixed; 
z-index: 9; 
top:10%; 
left:50%; 
margin-left:-350px; 
width:700px; 
height:auto; 
max-height:400px; 
background:rgba(0,0,0,0.9); 
overflow:scroll; 
} 
.team-name-popup-inner{ 
position:relative; 
width:100%; 
height:auto; 
max-height: 100%; 
padding: 50px; 
overflow:scroll; 
} 
.team-popup-close{ 
position:absolute; 
z-index:999; 
top:5px; 
right:10px; 
color:#fff; 
}

HTML

<div class="team-name-popup"> 
<a href="#" class="team-popup-close">&times;</a> 
<div class="team-name-popup-inner"> 
<h5 class="team-name">Name</h5> 
Text here 
</div><!--team popup inner--> 
</div><!--team popup-->

我试图改变溢出，但随后滚动不起作用：

.team-name-popup{ 
.... 
overflow:hidden; 
} 
.team-name-popup-inner{ 
.... 
overflow:scroll; 
}

默认

滚动

如果你想要一个元素保持相对于屏幕的视口，MDN你需要'fixed'定位：>“'fixed'该元件是由正常的文档流中去除;在元素创建没有空间页面布局，而是相对于屏幕的视口进行定位，并且在滚动时不移动。“ https://developer.mozilla.org/en-US/docs/Web/CSS/position – UncaughtTypeError

答

请检查该解决方案。

.team-name-popup{ 
position:fixed; 
z-index: 9; 
top:10%; 
left:50%; 
margin-left:-350px; 
width:700px; 
height: 400px; 
max-height:400px; 
background:rgba(0,0,0,0.9); 
overflow:scroll; 
} 
.team-name-popup-inner{ 
position: absolute; 
width:100%; 
height: 400px; 
padding: 50px; 
overflow:scroll; 
} 
.team-popup-close{ 
position:absolute; 
z-index:999; 
top:5px; 
right:10px; 
color:#fff; 
}

非常感谢！所以看起来问题只是因为.team-popup-inner没有定义适当的高度。 – rainerbrunotte

这实际上是因为你在'.team-name-popup-inner'中有'position：relative'。然后我们不得不用'height：400px'和'position：absolute'来代替 –

固定位置的弹出窗口的CSS关闭按钮

相关推荐