javascript - Break out from relative parent container -

javascript - Break out from relative parent container -

i'm sure cannot done css, since what's within position: relative within of it. wondering maybe there javascript solution.

basically want accomplish this: http://jsfiddle.net/zvl8w/3/ if wrap relative container , fixed width won't work in this: http://jsfiddle.net/zvl8w/8/

and must in relative container, 2 elements must break out , work in first link example. possible somehow maybe javascript? note cannot remove relative parent container.

try http://jsfiddle.net/zvl8w/9/

html,body { width: 100%; height:100%; margin:0; padding:0; } .container { position: relative; width: 100%; height:100%; } .left-box { width: 100px; height: 100px; background-color: red; display: block; position:absolute; top:50%; left:0px; margin-top:-50px } .right-box { width: 100px; height: 100px; background-color: blue; display: block; position:absolute; top:50%; right:0px; margin-top:-50px }

or http://jsfiddle.net/zvl8w/10/

.container { position: relative; width: 200px; } .left-box { width: 100px; height: 100px; background-color: red; display: block; position:fixed; top:50%; left:0px; margin-top:-50px } .right-box { width: 100px; height: 100px; background-color: blue; display: block; position:fixed; top:50%; right:0px; margin-top:-50px }

javascript jquery html css