相對於另一個元素而不是其父元素的位置元素

Question

是否有可能使一個定位元素相對於另一個當前不是其父元素的元素？例如：

<div class="want-to-be-parent"> 
<div class="current-parent"> 
<div class="element-to-position"><!---content---></div> 
</div> 
</div> 

所以在這種情況下，我想在左上方的絕對位置'元素與位置「要要被父」，但其目前相對定位裏面目前的父」。

編輯 - 假設所有這三個元素都有「位置：相對」，我無法控制這一點。我想絕對地定位「元素到位置」，並且將其定位爲相對於「想要成爲父母」而不是「當前父母」。我不得不動態地做這件事，因爲沒有其他辦法。

Answer 1

設置希望將要父到position:relative;並設置當前父到position:static;

當一個元素上使用position:absolute將相對於非靜態位置的第一父定位，優選相對位置以避免弄亂佈局。

您的代碼應該是這個樣子：

.want-to-be-parent { 
 
    position:relative; 
 
    padding:40px; 
 
    border:1px solid; 
 
    
 
} 
 

 
.current-parent{ 
 
    padding:40px; 
 
    border:1px solid; 
 
} 
 

 
.element-to-position { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    padding:10px; 
 
    background:red; 
 
}

<div class="want-to-be-parent"> 
 
want to be parent 
 
    <div class="current-parent"> 
 
    curent parent 
 
    <div class="element-to-position"> 
 
     element 
 
    </div> 
 
    </div> 
 
</div>

立即關閉想將要父母時，使其成爲當前父母的兄弟姐妹