相对于另一个元素而不是其父元素的位置元素

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>

立即关闭想将要父母时，使其成为当前父母的兄弟姐妹