Foros del Web » Creando para Internet » CSS »

capas con z-index y una capa contenedor

Estas en el tema de capas con z-index y una capa contenedor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/02/2007, 10:54
 
Fecha de Ingreso: febrero-2007
Mensajes: 5
Antigüedad: 10 años, 10 meses
Puntos: 0
capas con z-index y una capa contenedor

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
  #2 (permalink)  
Antiguo 11/02/2007, 13:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: capas con z-index y una capa contenedor

¿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.
  #3 (permalink)  
Antiguo 11/02/2007, 18:19
 
Fecha de Ingreso: febrero-2007
Mensajes: 5
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: capas con z-index y una capa contenedor

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
  #4 (permalink)  
Antiguo 11/02/2007, 18:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: capas con z-index y una capa contenedor

¡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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:19.