Css兄弟绝对定位答案

【问题标题】：Css Sibling Absolute PositioningCss兄弟绝对定位
【发布时间】：2012-05-24 09:12:20
【问题描述】：

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

【问题讨论】：

标签： css position

【解决方案1】：

绝对定位取决于"current positioning context"，它可能包含父元素（如果是绝对定位或相对定位），但绝不会包含兄弟元素。

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

【讨论】：

【解决方案2】：

没有办法使用绝对位置，根据w3c specification:

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

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

而且没办法使用相对定位，也照着w3cspecification:

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

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

总结：

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

【讨论】：

好答案！我在小提琴中解决了它，以确保@Arg Geo 很好地理解它:)
我不同意这个答案。相对定位元素是相对于正常流定位的，而正常流依赖于兄弟元素。因此隐含地，使用相对定位将相对于兄弟元素定位您的元素。

【解决方案3】：

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

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

然而：一个绝对定位的元素也会受到它的兄弟元素（在元素之前的元素）的影响。如果前面的兄弟元素是相对定位的，并且你的绝对定位元素设置了它的顶级属性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/

【讨论】：

嗯，这正是我所需要的！谢谢！

【解决方案4】：

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

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

【讨论】：

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

【解决方案5】：

用 jquery 试试

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

【讨论】：

这很好 Denny 但我认为 Farray 的解决方案要简单得多。非常感谢！