CSS同级绝对定位

Question

有没有什么办法可以让div相对于它的兄弟姐妹绝对定位？例如：在一个 div 内还有另外两个 div - div1 和 div2。我想将 div2 相对于 div1 绝对定位。

Answer 1

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

你能重组你的dom，让你有一个亲子而不是兄弟姐妹吗？如果是这样，您可以将父级的位置设置为相对或绝对，将子级的位置设置为绝对，并且子级的位置相对于父级保持绝对位置。

Answer 2

无法使用绝对位置，根据

w3c规范：

在绝对定位模型中，盒子相对于其包含块显式偏移

— 相对于父块，而不是相对于兄弟块

并且无法使用相对定位，也根据

w3c规范：

一旦盒子按照正常流程布局或浮动，它可能会相对于该位置移动。

— 相对于方块的位置，而不是相对于兄弟方块

总结：

没人能解决你所描述的问题

Answer 3

正确答案是：

不会，但至少它的垂直位置可以受到兄弟姐妹的影响。

正如其他答案所述，绝对定位的 div 的位置是相对于其祖先的。准确地说，当向上遍历 DOM 树时，它是相对于未静态定位的第一个祖先而言的。

但是：绝对定位的元素也会受到其兄弟元素（位于元素之前的元素）的影响。如果前面的同级元素是相对定位的，并且绝对定位的元素设置了其 top-property not ，那么它会垂直放置在那些相对定位的同级元素下方。

<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/

Answer 4

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

Answer 5

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

Answer 6

.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>