Question

In fact I am much familiar with HTML and CSS but when it comes to setup multiple hierarchical div with relative and absolute position giving me damn trouble.

What I have is below

<div id="firstdiv">

   <div id="secdiv">

      <div id="thirddiv">

         <div id="forthdiv">

         </div>

      </div>

   </div>

</div>

Now I want to align most div on absolute position so I set position relative to #firstdiv now set position absolute to #secdiv and all is going well

Now I want to set my #forthdiv absolute to #thirddiv and so I set #thirddiv to position relative and #forthdiv to position absolute and hear I am getting trouble.

#forthdiv is not considering parent (#thriddiv) relation but it is considering #firstdiv relation and getting position according to #firstdiv.

Now how to set this all so absolute position div only consider its own parent and not root

Answer 1

Try something like this

http://jsfiddle.net/Mcp6L/