Relationships Among zIndex Values (W3C)
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>layer.style.zIndex</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setZ(field) {
switch (field.name) {
case "top" :
document.getElementById("topLayer").style.zIndex = parseInt(field.value)
break
case "mid" :
document.getElementById("middleLayer").style.zIndex = parseInt(field.value)
break
case "bot" :
document.getElementById("bottomLayer").style.zIndex = parseInt(field.value)
}
showValues()
}
function showValues() {
var botLayer = document.getElementById("bottomLayer")
var midLayer = document.getElementById("middleLayer")
var topLayer = document.getElementById("topLayer")
document.forms[0].bot.value = botLayer.style.zIndex
document.forms[1].mid.value = midLayer.style.zIndex
document.forms[2].top.value = topLayer.style.zIndex
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1><TT>layer.style.zIndex</TT> Property of Sibling Layers</H1>
<HR>
Enter new zIndex values to see the effect on three layers.<P>
<DIV STYLE="position:absolute; top:140; width:240; background-color:coral">
<FORM>
Control Original Bottom Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="bot" SIZE=3
onChange="setZ(this)"></TD></TR>
</TABLE>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:220; width:240; background-color:aquamarine">
<FORM>
Control Original Middle Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="mid" SIZE=3
onChange="setZ(this)"></TD></TR>
</TABLE></FORM>
</DIV>
<DIV STYLE="position:absolute; top:300; width:240; background-color:yellow">
<FORM>
Control Original Top Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="top" SIZE=3
onChange="setZ(this)"></TD></TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="bottomLayer" STYLE="position:absolute; top:140; left:260; width:300;
height:190; z-Index:0; background-color:coral">
<SPAN><B>Original Bottom Layer</B></SPAN>
</DIV>
<DIV ID="middleLayer" STYLE="position:absolute; top:160; left:280; width:300;
height:190; z-Index:0; background-color:aquamarine">
<SPAN><B>Original Middle DIV</B></SPAN>
</DIV>
<DIV ID="topLayer" STYLE="position:absolute; top:180; left:300; width:300;
height:190; z-Index:0; background-color:yellow">
<SPAN><B>Original Top Layer</B></SPAN>
</DIV>
</BODY>
</HTML>
Related examples in the same category