css absolute position an inner div to the top of the page ignoring parents relative position

Question

is there a way to absolute position an inner div to the top of the page ignoring parents relative position?

Answer 1

Nope, unless you re-locate it in the DOM.

(using position:fixed might be an alternative if you want it to be window related instead of document related)

Answer 2

You can use position: absolute; and negative values:

HTML:

<div id="parent">
      <div id="child">
           The child's content
      </div>
</div>

CSS:

#parent
{
    position: relative;
    top: 200px;
    border: 1px dashed #f00;
    height: 50px;
    width: 200px;
}

#child
{
    position: absolute;
    top: -200px;
}

This should do it. Example for you here.