w3cbug22772a

jim's example, modify as desired until it works, then post to bug report

by jmichae3

HTML

<h2>original test</h2>
<style>
#i3 { 
	position:absolute; 
	position-root:element(#i2); 
	-moz-position-root:element(#i2); 
	-o-position-root:element(#i2); 
	-webkit-position-root:element(#i2); 
	-atsc-position-root:element(#i2); 
	-khtml-position-root:element(#i2); 
	-wap-position-root:element(#i2); 
	-ms-position-root:element(#i2); 
	mso-position-root:element(#i2); 
	top:0px; 
    /*right:0px; */
    /*bottom:0px; */
    left:0px;
}
</style>
<div id="i1" style="z-index:1">hello<img src="abc.jpg" alt="abc">, Jake!
<table>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2<span id="i3"><img src="http://jesusnjim.com/pix/mt/DSCN0721.jpg" alt="def" width="30" height="20"></span></td><td>c2</td></tr>
<tr><td>a3</td><td>b3</td><td>c3</td></tr>
</table>
</div>
<span id="i2" style="z-index:2;position:absolute;left:attr(left);">testing...<img id="i4" src="http://jesusnjim.com/pix/maxima/ishikawa.PNG" alt="abc" width="35" height="35"></span>
<!--this image of the gnuplot should be positioned right on top of after the b2 in the table, and the mountain should be underneath after the b2 in almost the same position-->
<!-- position this element over the <td id="3"><img src="def.png" alt="def"></td> -->
    <br><br><br>
    <div>offsetLeft:<span id="ol"></span></div>
    <div>offsetTop:<span id="ot"></span></div>
    <div>clientWidth:<span id="ocw"></span></div>
    <div>clientHeight:<span id="och"></span></div>
    <div>offsetParent:<span id="op"></span></div>
    <script>
var e=document.getElementById('i4');        document.getElementById('ocw').innerHTML=e.clientWidth;
document.getElementById('och').innerHTML=e.clientHeight;
document.getElementById('ol').innerHTML=e.offsetLeft;
document.getElementById('ot').innerHTML=e.offsetTop;
document.getElementById('op').innerHTML=e.offsetParent;
        
    </script>