相对定位的div嵌套在绝对定位的div中

Question

考虑以下情况，

   <div id="d1" style="position:relative">
    <div id="d2" style="position:absolute">
     <div id="d3" style="position:absolute">
     </div>
    </div>
   </div>

参考链接，我确定<div id="d3">将相对于<div id="d2">定位，哪怕我们给<div id="d2">设置为绝对定位。同样地，当我们将相对定位的<div>放置在绝对定位的<div>中时，它会假设什么呢？

   <div id="d1" style="position:relative">
    <div id="d2" style="position:absolute">
     <div id="d3" style="position:relative">
     </div>
    </div>
   </div>

可以有人解释一下这个吗？

- Rajaprabhu Aravindasamy

---

我会认为它的行为就像在任何其他div内部的“relative” div一样。你确切的问题是什么？ - deceze

d3必须相对于d2定位，因为定义说明它是相对于第一个非静态父元素的绝对定位。对于您的第二个示例，没有什么可以假设的，它只是一个相对定位的div在一个绝对定位的div中。没有什么特别的。 - Sven Bieder

Answer 1

您期望相对定位的 d3 div 保持相对于其父元素的位置。有关应如何定位的更多信息，请参见CSS W3规范。

我强调“应该”是因为各个浏览器中的盒模型存在怪异，可能会影响此功能。

请参见此处的JSFiddle，进行快速演示。

- Kami

---

哪些浏览器对此有什么怪癖？我不知道。 - Rob

@Rob IE 6/7总是一个特殊情况，可能需要额外的关注 - 像https://dev59.com/YGs05IYBdhLWcg3wB9af这样的问题。 - Kami

Answer 2

考虑到HTML/标记语言

 <div id="d1" style="position:relative">
  <div id="d2" style="position:absolute">
   <div id="d3" style="position:relative">
   </div>
  </div>
 </div>

• id为d1的div元素将保持文档的正常流动。
• id为d1的div元素没有偏移属性（上、右、下、左），因此它将保持在原地。也就是说，它的位置就像没有应用position: relative一样。
• id为d1的div元素将作为id为d2的div元素的新定位上下文。

• id为d2的div元素将被从文档的正常流中取出。
• id为d2的div元素将相对于id为d1的div元素进行定位。

• id为d3的div元素将保持文档的正常流动，但其流动现在由id为d2的div元素决定。

以十个步骤学习CSS定位

- Jawad

Answer 3

正如@Kami所说，div#d3应该相对于其父元素，并在这里显示--我制作了一个jsFiddle来更好地解释，以便您可以尝试不同的结果。

jsFiddle：http://jsfiddle.net/3ezcV/

- Eric Goncalves