3

Consider The Following case,

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

By Referring the Link,

I Just confirmed that the <div id="d3"> will be relative to the <div id="d2">.
Even if we given position as absolute for <div id="d2">.

Similarly what would it assumes when we place <div>s like below? (relative <div> inside a absolute <div>) 

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

can anybody explain this.?

4

3 回答 3

3

您会期望relativedivd3保持相对于其父级的位置。有关如何定位事物的更多信息，请参阅Css 的 W3 规范。

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

请参阅此处的 JSFiddle以获取有关此内容的快速演示。

于 2012-12-03T16:09:45.587 回答
3

鉴于 html/标记

 <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 确定。

十步学习 CSS 定位

于 2012-12-03T16:27:50.107 回答
0

正如@Kami 所说，div#d3应该相对于它的父级，并显示在这里——我整理了一个 jsFiddle 来更好地解释，所以你可以玩不同的结果。

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

于 2012-12-03T16:16:06.840 回答