Css兄弟绝对定位

Question

有没有办法绝对将div放在兄弟姐妹身上？例如:在div内部还有另外两个div - div1和div2.我想绝对将div2定位到div1.

Answer 1

绝对定位取决于"当前定位上下文",其可以包括父元素(如果绝对或相对定位)但是将永远不包括兄弟元素.

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

Answer 2

根据w3c 规范,没有办法使用绝对位置:

在绝对定位模型中,框相对于其包含块明确偏移

- 相对于父母阻止,而不是兄弟姐妹

并没有办法使用相对定位,也根据w3c 规范:

一旦盒子按照正常流动布置或浮动,它可以相对于该位置移动.

- 相对于阻止位置,而不是兄弟阻止

摘要:

没人能解决你描述的问题

Answer 3

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

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

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

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