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

Question

是否可以使定位元素相对于当前不是其父元素的另一个元素？例子：

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

所以在这种情况下，我想将“元素到位置”绝对定位在“想要成为父母”的左上角，但它目前相对定位在“当前父母”内。

编辑 - 假设所有这三个元素都具有“位置：相对”并且我无法控制它。我想绝对定位“元素到位置”，并让它相对于“想要成为父母”而不是“当前父母”进行绝对定位。我必须动态执行此操作，因为没有其他方法。

Answer 1

将want-to-be-parentposition:relative;设置为并将current-parent设置为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>