What i'm looking to do is dynamically nest transparent layers inside other tansparent layers but offset from each other, but when i try to do this they literally become nested one within another! So, if i have a 2 transparent layers 100x100 and i nest one within the other and set the left position of the one being nested to 100, you wont see it becuase it is like under the document body! Weird! If i nest a transparent layer within a nontransparent layer and then offset it by 100you would see the other layer offset from the parent layer! How do i nest tansparent layers within other transparent layers and have them sit on top of the parent layer instead of inside the layer? Here an example of what im talking about...copy and paste... <br />
<br />
<html> <br />
<head> <br />
</head> <br />
<br />
<body bgcolor="#FFFFFF" text="#000000"> <br />
<div id = "layer1" style = "position:absolute;left:0px;top:0px;height:100px;width:100px;background-color:green;"></div> <br />
<div id = "layer5" style = "position:absolute;left:0px;top:200px;height:100px;width:100px;background-color:green;"></div> <br />
</body> <br />
<script language = "javascript1.2"> <br />
These layers get nested inside one another! <br />
var a = "<div id = 'layer2' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:blue;filter:alpha(opacity=50);'></div>" <br />
var b = "<div id = 'layer3' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:red;filter:alpha(opacity=50);'></div>" <br />
var c = "<div id = 'layer4' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color
urple;filter:alpha(opacity=50);'></div>" <br />
document.all["layer1"].innerHTML = a <br />
document.all["layer2"].innerHTML = b <br />
document.all["layer3"].innerHTML = c <br />
and these sit on top of one another and look offset from each other! <br />
var d = "<div id = 'layer6' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:blue;'></div>" <br />
var e = "<div id = 'layer7' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:red;'></div>" <br />
var f = "<div id = 'layer8' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-colorurple;'></div>" <br />
document.all["layer5"].innerHTML = d <br />
document.all["layer6"].innerHTML = e <br />
document.all["layer7"].innerHTML = f <br />
</script> <br />
</html><!--content-->Try using relative instead of absolute positioning.<br />
<br />
Also - with layers (DIVs) there really isnt much need to nest (as with tables) - just be sure to do your z-index the way you intend.<br />
<br />
hth<!--content-->
<br />
<html> <br />
<head> <br />
</head> <br />
<br />
<body bgcolor="#FFFFFF" text="#000000"> <br />
<div id = "layer1" style = "position:absolute;left:0px;top:0px;height:100px;width:100px;background-color:green;"></div> <br />
<div id = "layer5" style = "position:absolute;left:0px;top:200px;height:100px;width:100px;background-color:green;"></div> <br />
</body> <br />
<script language = "javascript1.2"> <br />
These layers get nested inside one another! <br />
var a = "<div id = 'layer2' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:blue;filter:alpha(opacity=50);'></div>" <br />
var b = "<div id = 'layer3' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:red;filter:alpha(opacity=50);'></div>" <br />
var c = "<div id = 'layer4' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color
urple;filter:alpha(opacity=50);'></div>" <br />document.all["layer1"].innerHTML = a <br />
document.all["layer2"].innerHTML = b <br />
document.all["layer3"].innerHTML = c <br />
and these sit on top of one another and look offset from each other! <br />
var d = "<div id = 'layer6' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:blue;'></div>" <br />
var e = "<div id = 'layer7' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color:red;'></div>" <br />
var f = "<div id = 'layer8' style = 'position:absolute;left:50px;top:50px;height:100px;width:100px;background-color
urple;'></div>" <br />document.all["layer5"].innerHTML = d <br />
document.all["layer6"].innerHTML = e <br />
document.all["layer7"].innerHTML = f <br />
</script> <br />
</html><!--content-->Try using relative instead of absolute positioning.<br />
<br />
Also - with layers (DIVs) there really isnt much need to nest (as with tables) - just be sure to do your z-index the way you intend.<br />
<br />
hth<!--content-->