Kumaravel Kumaravel - 24 days ago 7
CSS Question

How to position a close icon (top right) in the popup with below DOM structure?

I need to position a popup close icon with below DOM structure

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


My output should be like this:

enter image description here

Positioning should work for all screens. Please give me the answer with this DOM structure.

NOTE: Popup content div and close icon div are separated.

Answer

Here is one way

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