I can't get nested layers to observe z-index. In the code below the image always appears on top despite having a lower z-index than the text.
<html>
<head>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div id="mainDiv" style="position:absolute">
<div id="textbox1" style="position:absolute; left:220px; top:100px; width:100px; height:100px; z-index:500; visibility:visible">
<table width="100%" border=0 cellspacing=0 cellpadding=0 ><tr><td>
<b>Layer 1</b>
</td></tr></table>
</DIV>
</div>
<div id="newDiv" style="position:absolute">
<div id="image1" style="position:absolute; left:160px; top:65px; width:80px; height:100px; z-index:5; visibility:visible">
<img name="image1" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>
</body>
</html>
Any help would be appreciated.Take the position:absolute; out of mainDiv and newDiv.Hi Fang
Thanks for the reply.
That certainly fixed the z-index, but in the real code I also have position elements in the first layer. So the positioning goes off without the absolute.
Any other ideas? I thought z-index was supposed to be absolute despitenested layers?Then these layers must have a z-index too.
From your example:
<html>
<head>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div id="mainDiv" style="position:absolute' z-index:499;">
<div id="textbox1" style="position:absolute; left:220px; top:100px; width:100px; height:100px; z-index:500; visibility:visible">
<table width="100%" border=0 cellspacing=0 cellpadding=0 ><tr><td>
<b>Layer 1</b>
</td></tr></table>
</DIV>
</div>
<div id="newDiv" style="position:absolute; z-index:4;">
<div id="image1" style="position:absolute; left:160px; top:65px; width:80px; height:100px; z-index:5; visibility:visible">
<img name="image1" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>
</body>
</html>
<html>
<head>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div id="mainDiv" style="position:absolute">
<div id="textbox1" style="position:absolute; left:220px; top:100px; width:100px; height:100px; z-index:500; visibility:visible">
<table width="100%" border=0 cellspacing=0 cellpadding=0 ><tr><td>
<b>Layer 1</b>
</td></tr></table>
</DIV>
</div>
<div id="newDiv" style="position:absolute">
<div id="image1" style="position:absolute; left:160px; top:65px; width:80px; height:100px; z-index:5; visibility:visible">
<img name="image1" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>
</body>
</html>
Any help would be appreciated.Take the position:absolute; out of mainDiv and newDiv.Hi Fang
Thanks for the reply.
That certainly fixed the z-index, but in the real code I also have position elements in the first layer. So the positioning goes off without the absolute.
Any other ideas? I thought z-index was supposed to be absolute despitenested layers?Then these layers must have a z-index too.
From your example:
<html>
<head>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div id="mainDiv" style="position:absolute' z-index:499;">
<div id="textbox1" style="position:absolute; left:220px; top:100px; width:100px; height:100px; z-index:500; visibility:visible">
<table width="100%" border=0 cellspacing=0 cellpadding=0 ><tr><td>
<b>Layer 1</b>
</td></tr></table>
</DIV>
</div>
<div id="newDiv" style="position:absolute; z-index:4;">
<div id="image1" style="position:absolute; left:160px; top:65px; width:80px; height:100px; z-index:5; visibility:visible">
<img name="image1" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>
</body>
</html>