Greetings
In NN6.01, If one dynamically moves an IFRAME (embedded in a DIV) with a low
Z-Order over an IFRAME embedded DIV with a high Z-Order, one expects that
the IFRAME embedded in the DIV with the high Z-Order will appear on top.
Well, regardless of the Z-Order of the frames, the most recently moved one
is the one that appears on top (with the border partially erased,
cooincidentally - like the IFRAME border obeys the z-order, but not the
IFRAME).
If one follows this experiment by dynamically moving the IFRAME with the low
Z-Order out from "behind" the IFRAME with the high Z-Order, it drags the
content of the overlapping IFRAME with it, corrupting the original contents.
I have inferred from posts by others that there may be a bug in how Netscape
6.01 handles IFRAME z-orders, but why would this apply to DIVs? Is there a
work around? Am I doing something wrong?
The following script demonstrates the problem. I'll appreciate any insight
you might have. If you think there's a better place to post this question,
please give me a shove in the right direction.
Thanks
Tony
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function moveTheLowIFrameHost()
{
alert( "moving theLowIFrameHost (right) almost completely 'under'
theHighIFrameHost (left)" );
window.document.getElementById('theLowIFrameHost').style.left = '50px';
window.setTimeout( "afterMoveTheLowIFrameHost();", 1000 );
}
function afterMoveTheLowIFrameHost()
{
alert( "notice that although theLowIFrameHost has a lower z-order, " +
"it appears on top of the item with the higher z-order" );
window.setTimeout( "moveTheHighIFrameHost();", 1000 );
}
function moveTheHighIFrameHost()
{
alert( "moving theHighIFrameHost (contains red text) back to where " +
"theLowIFrameHost (contains black text) originally was (ie: the
right)" );
window.document.getElementById('theHighIFrameHost').style.left = '500px';
window.setTimeout( "afterMoveTheHighIFrameHost();", 1000 );
}
function afterMoveTheHighIFrameHost()
{
alert( "notice that the contents of theHighIFrameHost are still
corrupted" );
alert( "dynamically changing z-order makes no difference at run-time -
the last iframe/div moved is always on top" );
}
function Body_OnLoad()
{
window.top.theHighIFrame.document.documentElement.innerHTML =
"<FONT COLOR=\"Red\">This IFrame has a high z-order.</FONT>";
window.top.theLowIFrame.document.documentElement.innerHTML =
"This IFrame has a low z-order.";
window.setTimeout( "moveTheLowIFrameHost();", 1000 );
}
</SCRIPT>
</HEAD>
<BODY
ONLOAD="JavaScript:Body_OnLoad();">
<DIV
ID="theHighIFrameHost"
STYLE="position:absolute;left:5px;top:5px;z-order:100;">
<IFRAME NAME="theHighIFrame"></IFRAME>
</DIV>
<DIV
ID="theLowIFrameHost"
STYLE="position:absolute;left:500px;top:5px;z-order:10;">
<IFRAME NAME="theLowIFrame"></IFRAME>
</DIV>
</BODY>
</HTML>
