2 相对定位的 div？答案

【问题标题】：2 Relative Positioned Divs?2 相对定位的 div？
【发布时间】：2011-04-04 23:11:24
【问题描述】：

我有一个容器 div 具有相对定位，然后另一个 div 里面也有相对定位：

<div class="first">
  <div class="second">
    <img src="img.jpg" />
  </div>
</div>

我希望具有绝对定位的图像相对于“第二个”div 而不是“第一个”。但是我需要它们都具有相对定位，如何指定图像相对于“第二个”div？

【问题讨论】：

为什么这么复杂？你想达到什么目的？
复杂吗？我只希望图像与更接近的 div 相关。
相对于包含它的容器。那是第二个div。
@Czechnology：这仅在页面层次结构的范围内是正确的，除非父元素被赋予一个位置属性来告诉它如何处理子元素。否则它的边界将被简单地忽略。有关示例，请参阅我的答案和下面的链接文章。
Xtian，希望您的问题得到解决。选择有帮助的答案，让我们知道。

【解决方案1】：

在页面层次结构中，图像将相对于 .second;但是，您必须将父母定义为相对定位以供孩子照顾。

.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }

【讨论】：

【解决方案2】：

根据 CSS 标准，它自动相对于第二个 <div>，因为它嵌套在第二个 <div> 中，并且该 div 被定位。这是来自the CSS2 standard的引述：

定位框的包含块由最近的定位祖先建立

所以你在 DOM 树中向上计数，即从最近的祖先到文档根，然后停在第一个定位的祖先（如果没有，那么它是最近的容器，但这不适用这里）。在这种情况下，这将是您想要的 div.second。

【讨论】：

【解决方案3】：

.second img{ position:absolute; top:0; left:0; }

定位只是一个例子；您可以根据自己的需要进行更改。

【讨论】：