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

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

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