css - Css兄弟绝对定位

Question

有没有办法相对于它的兄弟来绝对定位一个 div？例如：在一个 div 中还有另外两个 div - div1 和 div2。我想绝对定位 div2 相对于 div1。

Answer 1

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

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

Answer 2

根据w3c 规范，无法使用绝对位置：

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

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

并且没有办法使用相对定位，也根据w3c 规范：

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

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

概括：

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

Answer 3

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

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

然而：一个绝对定位的元素也会受到它的兄弟姐妹（在元素之前的那些）的影响。如果那些前面的兄弟姐妹是相对定位的，并且你的绝对定位元素没有设置它的 top 属性，那么它会垂直放置在那些相对定位的兄弟姐妹的下方。

<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

用jquery试试

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