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。

Answer 2

给出html / markup

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

DIV＃D1

div＃d1将保留在文档的正常流程中。
div＃d1没有偏移属性（顶部，右侧，底部，左侧），因此将保持原样。即它的位置将是如果没有位置：相对应用它。
div＃d1将作为div＃d2的新定位上下文。

DIV＃D2

div＃d2将从文档的正常流程中取出。
div＃d2将相对于div＃d1定位。

DIV＃D3

div＃d3将保留在文档的正常流程中，但它的流程现在由div＃d2确定。

Learn CSS Positioning in Ten Steps

Answer 3

正如@Kami所说，div#d3应该是相对于它的父亲，并显示here - 我把jsFiddle放在一起更好地解释，所以你可以玩不同的结果。

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

绝对div内的相对div

3 个答案: