Foro sobre hojas de estilo CSS
Participe, siéntase libre de escribir un mensaje en este foro de discusión o de responder a un mensaje del mismo. Aportando su opinión enriquece este sitio de manera que todos podemos aprender unos de otros. Los foros son el complemento ideal al curso para aprender compartiendo.
capas con z-index y una capa contenedor
Volver al foro |
Escribir mensaje |
Añadir nuevo tema
De: PedroFecha: 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: ZeroKilledFecha: 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: PedroFecha: 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: PedroFecha: 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: YllelderFecha: 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: SurienFecha: 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: mariaFecha: 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 |
Escribir mensaje |
Añadir nuevo temaQuizás le interese:
WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.
