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

Question

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

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

在这种情况下，我想要将“要定位的元素”绝对定位在“期望成为父级”的左上角，但当前它是相对于“当前父级”进行定位的。

编辑 - 假设这三个元素都具有“position：relative”，我无法控制它们。我想要绝对定位“要定位的元素”，并使其相对于“期望成为父级”而不是“当前父级”进行绝对定位。由于没有其他方法，我必须动态地执行此操作。

- Jerpl

---

请参考以下相关问题：https://dev59.com/EVwY5IYBdhLWcg3wD0PG - DRosenfeld

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>

- Chiller

---

当立即关闭想要成为父级的元素时，将其作为当前父级的兄弟元素，这样做更加有趣。仍然像魔法一样运行。 - Gerard

抱歉，我的表述可能不够清晰。显然，我知道如何使用CSS来实现这一点，但我不想改变那些div的任何内容或它们的定位方式，我只想动态地将“要定位的元素”从其当前位置绝对定位到“期望成为父级”的内部。 - Jerpl

@Jerpl，这正是我使用 CSS 所做的事情... 我没有改变 HTML... 也许你应该编辑你的问题，使它更清晰 :) - Chiller

最近的定位祖先不需要是 position: relative。它可以是除了 static 以外的任何定位值。当然，relative 是最合理的选择，因为它不会干扰布局。 - Michael Benjamin