Kumaravel Kumaravel - 1 year ago 78
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 Source

Here is one way

    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%;

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