DOM構造の下にポップアップで閉じるアイコン（右上）を配置する方法はありますか？

Question

は私が

<div class="DIV1"></div> 
<div class="DIV2">Content of the POPUP</div> 

私の出力は次のようにあるべきDOM構造の下で、ポップアップ閉じるアイコンを配置する必要があります。

ポジショニングは、すべての画面のために働く必要があります。このDOM構造の答えを教えてください。

注：ポップアップコンテンツdivとクローズアイコンdivは区切られています。ここで

Answer 1

は片道

.close 
 
{ 
 
    background-color: black; 
 
    position: absolute; 
 
    color: white;   
 
    width: 10px; 
 
    height : 15px; 
 
    padding: 5px 10px 10px; 
 
    left: 77%; 
 
    margin: calc(20% - 35px) 0 0 8%; 
 
    border-radius: 50%; 
 
} 
 

 
.popup 
 
{ 
 
    width: 77%; 
 
    margin: 20% 8%; 
 
    z-index: 99; 
 
    position: absolute; 
 
    padding: 10px; 
 
    background-color : white; 
 
    height : 300px; 
 
    overflow : scroll; 
 
    }

<div class="close">X</div> 
 

 
<div class="popup"> 
 

 
<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br>fgh<br> 
 

 
</div>

Answer 2

このfiddle

を見ているあなたは、クラス

#wrapper{ 
 
    position: relative; 
 
    margin-top: 1rem; 
 
    padding: 1rem; 
 
    width: 300px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#close{ 
 
    position: relative; 
 
    width: 20px; 
 
    height: 20px; 
 
    color: red; 
 
    border: 1px solid red; 
 
    border-radius: 10px; 
 
    float: right; 
 
    text-align: center; 
 
    line-height: 1; 
 
} 
 
#content{ 
 
    position: relative; 
 
    background-color: #fff; 
 
    margin-top: 30px; 
 
    border: 2px solid black; 
 
    padding: 1rem; 
 
}

<div id="wrapper"> 
 
    <div id="close">x</div> 
 
    <div id="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias saepe mollitia unde sint voluptas nostrum, cumque minima, ea quam maiores cum vitae ipsa hic! Quas nesciunt officiis alias laudantium!</p> 
 
    </div> 
 
</div>

でIDを置き換えることができます