A more modern solution to this question is to use the viewport unit vw and calc().

Set the width of the child element to 100% of the viewport width, or 100vw. Then move the child element 50% of the viewport width – minus 50% of the parent element's width – to the left to make it meet the edge of the screen.

.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
}

With this, the position type of the parent element doesn't matter and the child element is still part of the content flow.

Here's a demo.

Browser support for vw and for calc() can generally be seen as IE9+.

Note: This assumes the box model is set to border-box. Without border-box, you'll also have to subtract paddings and borders, making this solution a mess.