CSS兄弟元素绝对定位

Question

有没有办法使一个div相对于它的兄弟元素进行绝对定位？例如：在一个div中有两个其他的div - div1和div2。我想要将div2相对于div1进行绝对定位。

- Arg Geo

---

根据您需要进行的绝对定位类型，您可以在div1下直接添加一个同级div（div2），并使其相对定位。然后，您可以在div2内部放置一个绝对定位的子元素。这将使您对div2相对于div1的定位有一定的控制。 - Omar Shishani

Answer 1

绝对定位取决于“当前定位上下文”，这可能包括父元素（如果绝对或相对定位），但永远不会包括同级元素。

您是否可以重新组织dom，使其具有父子关系而不是兄弟关系？如果可以，您可以将父元素的位置设置为相对或绝对，将子元素的位置设置为绝对，那么子元素的位置将保持相对于父元素的绝对位置。

- Farray

Answer 2

根据w3c 规范，绝对定位模型无法使用绝对位置，一个盒子的显式偏移是相对于其包含块：

在绝对定位模型中，一个盒子明确地相对于其包含块偏移

—— 相对于父块而非同级块

并且按照w3c 规范，没有使用相对定位的方法：

一旦一个盒子按照正常流或浮动布局完成，它可以相对于这个位置移动。

—— 相对于块的位置而不是同级块

总结：

无人能解决您描述的问题。

- Vladimir Starkov

---

好的答案！我在一个fiddle中解决了它，以确保@Arg Geo理解得很好 :) - Ravi

我不同意这个答案。相对定位的元素是相对于正常流定位的，而正常流取决于兄弟元素。因此，隐式地使用相对定位将使您的元素相对于兄弟元素进行定位。 - Martin Andersson

Answer 3

正确答案是：不，但至少它的垂直位置可以受到兄弟元素的影响。

正如其他答案所述，绝对定位

的位置是相对于其祖先元素而言的。要精确，就是在DOM树向上遍历时，相对于第一个不是静态定位的祖先元素。

然而：绝对定位元素还会受到其兄弟元素（在元素之前的那些）的影响。如果这些前面的兄弟元素被相对定位，并且您的绝对定位元素的顶部属性未设置，则它将在这些相对定位的兄弟元素下方垂直放置。

<div class="relativeContainer">
  <div class="relative block">relative 1</div>
  <div class="relative block">relative 2</div>
  <div class="absoluteTopZero block">absolute top 0</div>
  <div class="absoluteTopInherited block">absolute</div> 
</div>

请查看这个示例： https://jsfiddle.net/fgxeu54t/28/

- Jan Feldmann

Answer 4

根据您的需求，您可以使用适当的左/上/右/下值将它们浮动或绝对定位。

发布您的标记并解释您要实现的准确目标。

- MK_Dev

---

我正在开发一个WordPress主题，我想在文章中应用这些设置。因此，我不能绝对定位两者，因为每篇文章的高度都不相同。 - Arg Geo

Answer 5

试着使用jQuery

<script type="text/javascript">
        $('#div2').css('margin-left', $('#div1').outerWidth() +XXX + 'px');

- Denny Mueller

---

这个很好用，Denny，但我认为Farray的解决方案更简单。非常感谢！ - Arg Geo

Answer 6

这对我有用。基本上我在这里做的是在另一个元素上创建一个相对定位的 div（因为我想要它在上面），并将其高度设置为0，以便不留下空白。然后在其中创建一个绝对定位的工具提示（它可以溢出）并设置 bottom:0。

.prompt {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

.promptOuterWrapper {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.promptInnerWrapper {
  position: relative;
  width: 100%;
  height: 0;
}

.mainform {
  width: fit-content;
  width: 30%;
  justify-content: center;
}

body {
  background-color: white;
  min-height: 100vh;
  min-width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

<div className={styles.mainform}>
  <form>
    <input type="text" />
    <div className={styles.promptOuterWrapper}>
      <div className={styles.promptInnerWrapper}>
        <div className={styles.prompt}>
          This is a snippet above its sibling
        </div>
      </div>
      <input type="text" placeholder="target"/>
    </div>
  </form>
</div>

- Matt