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

I would assume that it behaves like a `relative` div inside any other div. What's your question exactly? — deceze, Dec 03 '12 at 16:07
d3 must be relative to d2, because the definition says it's an absolute positioning, relative to the first non-static parent. For your second example, there is nothing to assume, it is just a relative positioned div in an absolute positioned div. Nothing special there — Sven Bieder, Dec 03 '12 at 16:11

score 4 · Accepted Answer · answered Dec 03 '12 at 16:09

4

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.

answered Dec 03 '12 at 16:09

Kami

19,134
4
51
63

Which browsers have what quirks about this? I'm not aware of any. – Rob Dec 03 '12 at 16:20
@Rob IE 6/7 are always a special case and may require additional attention - Things like http://stackoverflow.com/questions/7499538/problem-with-ie-position-absolute – Kami Dec 03 '12 at 16:26

score 3 · Answer 2 · answered Dec 03 '12 at 16:27

Given the 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 will remain in the normal flow of the document.
div#d1 has no offset properties (Top, Right, Bottom, Left) and therefore will remain exactly where it is. i.e. it's position will be such as if no position: relative is applied to it.
div#d1 wil act as a new positioning context for div#d2.

div#d2

div#d2 will be taken out of the normal flow of the document.
div#d2 will be positioned relative to div#d1.

div#d3

div#d3 will remain in the normal flow of the document but it's flow is determined now by div#d2.

Learn CSS Positioning in Ten Steps

score 0 · Answer 3 · answered Dec 03 '12 at 16:16

0

As @Kami said, div#d3 should be relative to its parent, and is shown here -- I put together a jsFiddle to explain better, and so you can play with different results.

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

answered Dec 03 '12 at 16:16

Eric Goncalves

5,253
4
35
59

Relative div inside an Absolute div

3 Answers3