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