Question

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

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

所以在这个例子中，我想绝对将'element-to-position'放在'想要成为父母'的左上角，但它目前相对位于'current-parent'内。

编辑 - 假设所有这三个元素都有'位置：相对'，而我无法控制它。我想绝对定位'元素到位置'并且相对于'想要成为父母'并且不是'当前父母'而言它是绝对定位的。我必须动态地这样做，因为没有别的办法。

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>

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

1 个答案: