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

Question

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

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

默认

滚动

Answer 1

请检查该解决方案。

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