Bouton de fermeture CSS pour une fenêtre contextuelle à position fixe

Question

J'essaie de créer une fenêtre contextuelle déclenchée avec JQuery et stylée avec CSS. J'ai ajouté un bouton de fermeture en haut à droite de la boîte, mais lorsque vous faites défiler la boîte vers le bas (dépassement: défilement, en raison de la hauteur maximale de la boîte), le bouton de fermeture X défile également, même si une position absolue est définie :

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

J'ai essayé de changer les trop-pleins, mais le défilement ne fonctionne pas:

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

Par défaut

Faire défiler

Answer 1

S'il vous plaît vérifier cette 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; 
}