So for example
<body> <div style="position:absolute;top:10px"> this div parent(body) is static so make that our bounds </div> </body> <body> <div> <div style="position:absolute;top:10px"> this div parent(div) is static and so its parent(body) so make body our bounds </div> </div> </body> <body> <div style="position:relative"> <div style="position:absolute;top:10px"> this div parent(div) has a non static so stop there and make it our bounds </div> </div> </body>
Back when I build widgets for client site, would experience something like
<body> <div id="left-sidebar" /> <div id="main-content" /> <div id="right-content" style="position:relative;overflow:hidden"> <our-widget> Some basic requirements include * our widget sometimes could be bigger then the right-content size of the site like expanding ads * we cant change the style (we cant just flip the position relative or overflow hidden of client style) * and a lot more </our-widget> </div> </body>
One solution (probably the only solution) for this is to attach the widget to body and position it absolute to the same spot where it originated, an advantage of that is that no matter the structure of the site is, the widget will always be relative to the body and will always be on top of the any content. That was the short solution, the longer one involves injecting a placeholder for tracking where the widget will reference to, resizing the placeholder same as the widget so that the content below will adjust accordingly, listening to window resize, listening/constant tracking of the location of the placeholder incase the items on top expands, and a lot more.
But to what I said easier, earlier I said that everything is way easier to understand right now because back when I think IE5 or IE6 days you could set position absolute plus change the z-index to super high and it will ignore the non static position and you achieved what you want (almost as if everything is bound to body). But then everything changed when mozilla and others embraced the standards and this made position more confusing, but this is good news, the only bad news is that older IE like IE7 and IE8 has bugs on different stuff like z-index or layout bugs which sometimes make you think you had everything wrong. So to end things up, like the lightbulb moment statement from the site, css position once you understand it everything is way simpler :)