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

Answer 2

.popup { 
position:relative; 
}