How I can tell absolute position ignore is parent relative position?

Question

This is the code: http://jsfiddle.net/noamway/r8vMp/8/

    <div id="website" style="width:100%;">
    <div id="layoutAll" style="width:200px;margin:0 auto">
        <div id="layout" style="width:100%;position:relative;">
            <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
            Hello world
            </div>
        </div>
    </div>
</div>

And I like that "full_strip" will be 100% from all the page width. Because of the relative of is parent I can't do that. I can't remove any setting from the is parents so I need a commend or something else on him that will tell him to ignore is relative parent.

Thanks, Noam

Answer 1

Remove width:200px for div with id #layout. Important thing is dont use same id for two elements. Duplicate id's are dangerous.

CODE:

<div id="website" style="width:100%;">
    <div id="layout" style="margin:0 auto">
        <div id="layout" style="width:100%;position:relative;">
            <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
            Hello world
            </div>
        </div>
    </div>
</div>

DEMO FIDDLE

Answer 2

You basically ask for relating an absolute position Div which is dynamically generated inside a relative position Div to the body instead of to its relative parent Div.

Position relative and absolute are always related to the first root parent element that has a absolute or relative position. This why it is impossible to do what you ask for.

The only solution for you its to place the “full_strip” Div outside of its position relative parent element and into body tag.