固定位置弹出窗口的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;
}