固定位置のポップアップウィンドウの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

このソリューションをご確認ください。何のスペースは、要素のために作成されていない;要素は、通常の文書の流れから削除されfixed` `>」：あなたは要素がスクリーンビューポート、MDNに対するままにしたい場合は、` fixed`位置決めを必要とする

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