相对于其父div的CSS绝对定位

Question

我正在尝试安排两个div，如下图所示。

所以，我试过的就是这个。

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

我的css：

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

但是，我的x按钮相对于根div定位，并在浏览器的右上角显示x按钮。

有没有办法将绝对位置设置为其父级而不是将其设置为根元素？

谢谢。

Answer 1

.popup {
 position:relative;
}

Answer 2

要根据父级进行绝对定位，必须使用relative来定位父级。

.popup {
    position: relative;
}

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