"The absolutely positioned element is positioned relative to nearest positioned ancestor." -MDN: position - CSS

I understood this when there was a parent who was defined as position:relative; but what I didn't realize was that position:absolute technically qualified as a "positioned ancestor".

Here is a sample: / It would be nice if the text "At top" could have the top property apply to the window instead of the containing div but I just cannot figure out if it is possible to bypass.

<div>
 <div>Content
 </div>
</div>
<div style="position:absolute;">
 <div style="position:absolute;top:0px;">At top
 </div>
</div>

Is there any way to bypass a previously positioned absolute element (without using fixed)? A javascript solution is acceptable.

"The absolutely positioned element is positioned relative to nearest positioned ancestor." -MDN: position - CSS

I understood this when there was a parent who was defined as position:relative; but what I didn't realize was that position:absolute technically qualified as a "positioned ancestor".

Here is a sample: http://jsfiddle/MSzZG/ It would be nice if the text "At top" could have the top property apply to the window instead of the containing div but I just cannot figure out if it is possible to bypass.

<div>
 <div>Content
 </div>
</div>
<div style="position:absolute;">
 <div style="position:absolute;top:0px;">At top
 </div>
</div>

Is there any way to bypass a previously positioned absolute element (without using fixed)? A javascript solution is acceptable.

• javascript
• html
• css
• position

• have you tried fixed? This will always reference the window... – Pevara Commented Jun 13, 2013 at 20:52
• @PeterVR - I realize that, but fixed stays in place while the window is scrolled which can cause issues. – Travis J Commented Jun 13, 2013 at 20:54
• You can use float. Example: jsfiddle/MSzZG/1 – David Starkey Commented Jun 13, 2013 at 20:54
• @DavidStarkey - Not bad, but float just removed the previous element from the page flow, and that is why it looks like the top is being applied, but it really isn't. jsfiddle/MSzZG/2 – Travis J Commented Jun 13, 2013 at 20:55

3 Answers 3

You'll have to calculate the difference between its natural position and the desired position to place it absolutely in the window.

If you're using jQuery, you can let it do the math for you via the .offset(coordinates) function.

Answer

No. You can't do that.

Reasoning

If you WERE able to do that then you could position one div pletely away from the parent. This would not only make the parent "lonely" but also entirely defeat the purposes of nesting. Nesting div tags or any tags for that matter is not just done for cosmetic purposes; it is done to convey textual meaning to the user.

May i suggest reconsidering your approach? Perhaps if you explain what you would like the final result to bee, we can help you. there must surely be a solution.

Possible Solutions

• If you need the inner div be positioned at the top then take it one level out.
• remove absolute positioning from the parent.
• Utilzing another method of positioning other than absolute.

If you want the inner position: absolute div to be positioned relative to the window (which you should specify position: relative on) you need to not nest it.

position: absolute will ALWAYS be positioned relative to its MOST IMMEDIATE positioned parent (with position: absolute or position: relative). You can't bypass this - you just have to structure your HTML better or implement the CSS differently.

So basically the answer to your question is no :( at least not without using fixed positioning which you specifically mentioned not wanting to do.