capas con z-index y una capa contenedor

reziel · #1 (**permalink**) 11/02/2007, 10:54

Es mi primera intervención en este foro... asique les pido condescendencia

Tengo una capa principal que contiene a otras dos. Estas dos capas tienen z-index y una altura cualquiera. El problema es que la capa principal no crece con sus hijas, apareciendo dicha capa principal como si tuviera altura cero (Creo que la posición absoluta de las capas hijas es lo que hace que se salgan del flujo de la capa padre, pero es que si no pongo la posición absoluta, el z-index no me funciona)

Si alguien tiene alguna idea les estaría agradecido y espero que Dios se lo pague (de vez en cuando miren al cielo y a lo mejor cae algo...)

El codigo css y el html son los siguientes:

CSS
---
body {
font-family: Arial, Helvetica, sans-serif;
font-size:0.80em;
line-height:1.16em;
}

#principal{
position:relative;
margin:10px auto;
border:4px solid #FF0000;
width:43.1em;
}
#capa_1{
position:absolute;
color:#FFFFFF;
width:30%;
border:2px solid #0000FF;
background-color:#000000;
z-index:200;
}
#capa_2{
position:absolute;
left:10px;
width:40%;
border:2px solid #FF00FF;
padding:40px 0px 0px 0px;
z-index:100;
}

HTML
----
<body>
<div id="principal">
<div id="capa_1">Primer Plano</div>
<div id="capa_2">Segundo plano</div>
</div>
</body>
</html>

Muchas gracias

--------------

Para vivir mejor, caminar siempre por la sombrita

Mikmoro · #2 (**permalink**) 11/02/2007, 13:01

¿Sería algo así lo que quieres hacer?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>web</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
line-height: 1.16em;
}
#principal { border: 4px solid rgb(255, 0, 0);
margin: 10px auto;
position: relative;
width: 43.1em;
}
#capa_1 { border: 2px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
z-index: 2;
width: 30%;
}
#capa_2 { border: 2px solid rgb(255, 0, 255);
padding: 40px 0px 0px;
position: relative;
left: 10px;
z-index: 1;
width: 40%;
margin-top: -20px;
}
  </style>
</head>
<body>
<div id="principal">
<div id="capa_1">Primer Plano</div>
<div id="capa_2">Segundo plano
</div>
</div>
</body>
</html>

Ya dirás si te va bien. Y bien venido.

Mikel.

reziel · #3 (**permalink**) 11/02/2007, 18:19

Si señor, Mikel!!!!!!

Ya veo que como siempre, la solución es más simple de lo que pueda parecer!!!

. Ya veo el uso de las capas "relativas". No les he hecho mucho caso porque las veces que las he probado se me posicionaban con respecto a la ventana del navegador y no lograba los diseños que quería. Ahora ya veo el juego que me pueden dar utilizando convenientemente a las capas padre.

Pues eso, señores, intentaré devolver el favor resolviéndole a alguien sus dudas!!!

Bye, bye

-------------------

Para vivir mejor, caminar siempre por la sombrita

Mikmoro · #4 (**permalink**) 11/02/2007, 18:35

¡Me alegro de que te haya servido!

Como dices, si hay algo que controlas bien, sigue por aquí y tiempo tendrás de devolver el favor a gente que busque ayuda (yo mismo muchas veces

)

Hasta la vista.

Mikel.