i packed them all in container. not necessary, but easier, and clearer.
relation established with position relative on parent, and position absolute (in relation to parent, lol) for inner, child elements.
margin auto on parent takes care of horizontal centering that div, with all inner content. same positioning will overlap inner divs over each oder. bg colors and borders are there just to make things more obvious.
here goes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#container {position:relative;margin:100px auto; height:300px;width:300px; border:1px solid red;}
#layer1, #layer2, #layer3{position:absolute; left:0;top:0; height:300px;width:300px; background-color:yellow;}
</style>
</head>
<body>
<div id="container">
<div id="layer1">
something here
</div>
<div id="layer2">
something here
</div>
<div id="layer3">
something here
</div>
</div>
</body>
</html>
p.s.:but may i ask, what is the purpose of it? what exactly are you trying to accomplish, coz maybe it can be done more effectively using something completely different
p.p.s.:please avoid use of term “layer”..it associate to graphics, not css/html -only DW use that and it can be pretty confusing :p
there’s nothing wrong with divisions
