Note: This page is rather new and has stuff repeated all over the place. Most of the text and code relates to the Recalculated Offset bug but each example is analyzing the Calculated Offset bug. So look at the examples and not the relating text.
<li>
<a>Anchor</a>
<ul>Absolutely Positioned Undordered list</ul>
</li>
In the source of this page the above markup has been changed to the below.
<div class="container"> <!-- Element with hatch background -->
<div class="block">Element with transparent blue background</div>
<div class="absolute">Absolutely Positioned Element</div>
</div>
.container {float:left;background: url(hatch-background.gif);}
.absolute {background:green;position:absolute;height:25px;width:200px;}
.block {background: url(bluetran4.png);height: 25px;width: 300px;text-align:right}
What we have above is a Container element containing an absolutely positioned element. The code will look like this.
.container {float:left;background: url(bluehatchback3.gif);}
.absolute {background:green;position:absolute;height:25px;width:200px;}
.block {background: url(../../../images/examples/bluetran4.png);height: 25px;width: 300px;text-align:right}
.auto {left: auto;}
.zero {left: 0;}
.autotop {top: auto;}
.zerotop {top: 0;}
What we have above is a container element containing an absolutely positioned element. The code will look like this.
What we have above is a container element containing an absolutely positioned element. The code will look like this.
What we have above is a container element containing an absolutely positioned element. The code will look like this.
What we have above is a container element containing an absolutely positioned element. The code will look like this.
Failed: IE 8 (wrong left offset)
Failed: IE 8 (wrong left offset)
Failed: IE 8 (wrong left offset)
Failed: IE 8 (wrong left offset)
What we have above is a container element containing an absolutely positioned element. The code will look like this.
<div class="container">Container
<div class="absolute">Absolutely Positioned Element</div>
</div>
In the below examples, the absolutely positioned element is hidden from view by the normal position value and brought back into view by the hover position value. The first two examples do not work in IE7.