CSS close button for a popup window at fixed position - css

Question

I am trying to create a popup window triggered with JQuery and styled with CSS. I added a close button to the top right side of the box, however when you scroll down inside the box (overflow: scroll, due to max-height of the box) the X close button scrolls also, even though an absolute position is defined:
.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">
×
<div class="team-name-popup-inner">
<h5 class="team-name">Name</h5>
Text here
</div><!--team popup inner-->
</div><!--team popup-->
I tried changing the overflows, but then the scroll does not work:
.team-name-popup{
....
overflow:hidden;
}
.team-name-popup-inner{
....
overflow:scroll;
}
Default
Scroll

Answer 1

Please check this solution.
.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;
}