Hola
Bueno, no me ha quedado muy claro lo que quieres. Y no me queda claro lo de los niveles de profundidad. Por profundidad estaríamos hablando del eje Z y por lo tanto, de la propiedad z-index.
Si lo que quieres es alinear 3 capas y que estén a la misma altura, hay muchos ejemplos en el foro, pero te dejo aquí un par:
Código xhtml Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Pruebilla</title>
</head>
<body>
<div id="Base">
<div id="a">
<p> </p>
<p>Capa A</p>
<p> </p>
</div>
<div id="b">
<p> </p>
<p>Capa B</p>
<p> </p>
</div>
<div id="c">
<p> </p>
<p>Capa C</p>
<p> </p>
</div>
</div>
</body>
</html>
Primer estilo Código HTML:
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; background-color: #ccc; }
caption {padding: 5px;}
#Base { width: 100%; background-color: inherit; }
#a {
border: 1px solid #f00;
width: 20%;
float: left;
}
#b {
border: 1px solid #0f0;
width: 40%;
float: left;
}
#c {
border: 1px solid #00f;
width: 20%;
float: left;
}
</style> Segundo estilo Código HTML:
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; background-color: #ccc; }
caption {padding: 5px;}
#Base { width: 100%; background-color: inherit; }
#a {
border: 1px solid #f00;
width: 20%;
position: absolute;
top: 0px;
left: 41%
}
#b {
border: 1px solid #0f0;
width: 40%;
position: absolute;
top: 0px;
left: 0%
}
#c {
border: 1px solid #00f;
width: 20%;
position: absolute;
top: 0px;
left: 65%
}
</style> Para no repetir líneas innecesarias pegué primero el html y luego los estilos que modifican el código, solo debes insertarlos en la cabecera y probar.
Si no es esto lo que querías, detalla mejor tu planteamiento.
Felicidad