PDA

Click to See Complete Forum and Search --> : nested layers z-index problem

ozenet
02-19-2004, 02:46 AM
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="4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>

</body>
</html>

Any help would be appreciated.
Fang
02-19-2004, 06:46 AM
Take the position:absolute; out of mainDiv and newDiv.
ozenet
02-19-2004, 07:28 AM
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?
Fang
02-19-2004, 07:39 AM
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="4_albert_th.gif" border=0 align=top height=100 width=80>
</DIV>
</div>

</body>
</html>