Relative div inside an Absolute div

Question

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.?

Answer 1

You would expect the relative div d3 to maintain position relative to it's parent. See W3 Specification for Css for more information on how things should be positioned.

I emphasise should as there are quirks within individual browsers for the box model that may have an impact on this.

See the JSFiddle Here for a quick demo of this.