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

Question

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

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

所以在这种情况下，我想将“element-to-position”绝对定位在“want-to-be-parent”的左上角，但它当前相对定位在“current-parent”内。

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

Answer 1

将want-to-be-parent设置为position: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>