CSS absolute positioning with respect to its parent div

Question

I am trying to arrange two divs like the image below.

So, what I tried is this.

<div class="popup">
    <div class="close-button">
    <a class="close" href="#">
        <img alt="" src="/images/lb/close.png" width="30" height="30"></a>
    </div>
</div>

And my css:

.close-button {position:absolute; top:-0.5em; right:-0.5em; z-index:10;}

However, my x button is positioned with respect to root div, and display x button in top right corner of the browser.

Is there a way to set absolute position to its parent instead of setting it to root element?

Thank you.

Answer 1

To do absolute positioning based on the parent, the parent must be positioned using relative.

.popup {
    position: relative;
}

. close-button {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    z-index: 10;
}

Answer 2

.popup {
 position:relative;
}