html - 绝对 div 内的相对 div

Question

考虑以下情况，

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

通过引用 Link ,

我刚刚确认 <div id="d3">将相对于 <div id="d2"> .
即使我们给 <div id="d2"> 的绝对位置.

同样，当我们放置 <div> 时它会假设什么？像下面这样吗？ (相对 <div> 在绝对 <div> 内)

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

有人能解释一下吗？

Answer 1

您会期望 relative div d3 保持相对于其父级的位置。参见 W3 Specification for Css获取有关应该如何放置事物的更多信息。

我强调应该，因为盒子模型在各个浏览器中存在可能对此产生影响的怪癖。

参见 JSFiddle Here快速演示。