image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

capas con z-index y una capa contenedor

Volver al foro | Responder | Añadir nuevo tema


De: Pedro
Fecha: 10/02/2007
Mensaje:

Buenas noches, 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.

Si alguien tiene alguna idea me gustaría que la comentaran.

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;
}
#derecha{
position:absolute;
color:#FFFFFF;
z-index:200;
width:30%;
border:2px solid #0000FF;
background-color:#000000;
}
#izquierda{
position:absolute;
left:10px;
z-index:100;
width:40%;
border:2px solid #FF00FF;
padding:40px 0px 0px 0px;
}

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


Quizás le interese
De: ZeroKilled
Util para: 2 personas

Fecha: 11/02/2007
Mensaje:

el alto de la capa principal no se ajusta porque las dos capas hijas se salen del flujo de rendimiento del navegador. es decir, tienen position:absolute; tienes que tener cuidado con eso porque asi es como se supone que trabaje. el espacio de cualquier elemento que tenga position:absolute desaparece de la etiqueta que la contiene a el.



De: Pedro
Util para: 1 personas

Fecha: 11/02/2007
Mensaje:

Gracias por tu respuesta, ZeroKilled.

Según lo que comentas, no habría manera de meter esas capas hijas en el flujo de la padre, no?? ok, me lo imaginaba. Entonces el problema es el z-index, ya que si quieres que funcione la superposicion de capas (con lo que he aprendido hasta ahora) tienes que tener la position absoluta.

Tengo una solución, que es poner sin z-index a la capa hija que "sé" que va a crecer en un futuro y así me ahorro el problema, pero eso me limita a algunos aspectos en futuros diseños de páginas.

Bueno, muchas gracias por prestarme atención

Ciao!!!



De: Pedro
Util para: 2 personas

Fecha: 12/02/2007
Mensaje:

Buenas noches!!!

Por fin he dado con una solución, y gracias a Zerokilled dejé de seguir de cabezota con la posición absoluta de las capas!!

Es bien sencilla, simplemente sustituir la posicion absoluta por la relativa en todas las capas (la capa padre y las hijas)!!. Así de simple.

Solo habría que tener cuidado con la capa izquierda, ya que si no añadimos un margin-top=-20px se nos quedará debajo de la capa derecha.

El código CSS modificado sería el siguiente:

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;
}
#derecha{
position:relative;
color:#FFFFFF;
z-index:200;
width:30%;
border:2px solid #0000FF;
background-color:#000000;
}
#izquierda{
position:relative;
left:10px;
z-index:100;
width:40%;
border:2px solid #FF00FF;
padding:40px 0px 0px 0px;
margin-top:-20px;
}

Pues eso mismo, saludos a tod@s!!!!




De: Yllelder
Util para: 0 personas

Fecha: 06/10/2007
Mensaje:

Así es Pedro.

El porqué es el siguiente:

Cualquier capa con posición absoluta (sea hija o padre), no tiene en cuenta ningún otro elemento de la página, con lo cual, tu capa padre no se adaptaba a la capa hija porque la hija tenía posición absoluta y tenía que ser relativa (relativa a la padre).

Conclusión:

Absoluta: La capa tiene libre albedrío y no tiene en cuenta nada. Se la suda todo ! xD

Relativa: La capa es relativa a su contenedor, si el contenedor es otra capa, entonces estarán unidas y se tendrán en cuenta la una a la otra.



De: Surien
Util para: 0 personas

Fecha: 03/02/2010
Mensaje:

Buenas!

Llevaba tiempo probando con un problema parecido y sin saberlo dí con la solución, pero me perdí al aplicarla (pues no estaba seguro, tenía alguna capa en float y demás), así que para estas cosas la solución es position: relative :D mil gracias porque me habéis solucionado un buen puñado de tiempo de pruebas y más pruebas!



De: maria
Util para: 0 personas

Fecha: 11/06/2010
Mensaje:

Ufff me ha venido de perlas esta explicación... llevo siglos dándole vueltas a este tema. Mil gracias



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.