2个相对定位的分区？

Question

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

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

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

Answer 1

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

请参阅：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

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

Answer 2

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

  

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

建立

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

Answer 3

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

定位只是一个例子;你可以改变它以满足你的需要。