z-index ¿cuándo utilizarlo?
3 seguidores
Espero que no sea un tema muy trillado. Si es así, siento la recurrencia pero después de pelearme con esta propiedad unas cuantas veces, nunca he conseguido sacar nada en claro, así que lanzo la cuestión:
Por lo que tengo entendido, la propiedad z-index le proporciona una profundidad al objeto como si de capas superpuestas se tratase. Por ejemplo, si tenemos un DIV con z-index:5, éste estará por debajo del DIV con z-index:10000.
La teoría está muy bien, pero el problema está en la práctica. ¿Por qué c**o nunca me funciona cuando quiero utilizarlo? ¿Alguna sugerencia?
...estoy ocioso hoy.
orange
Amatulo
Por lo que creo entender aquí, para utilizar el z-index, tengo que tener los elementos en absolute y a partir de ahí ya le doy la profundidad que deseo a cada uno? Pensé que con 3 elementos y la posición relativa al contenedor también se podía utilizar. De no ser así, éste era mi fallo.
No te lo tomes a mal pero es que precisamente esa duda que tienes es lo que denota que no tienes claro este concepto. No dudo de tu conocimientos respecto a los otros.
Respondiendo a tu pregunta: NO hace falta que los elementos estén en absolute, basta con que estén superpuestos (también podrías hacerlo desplazándolos de su sitio con relative).
El z-index va a funcionar siempre, es decir pone unos elementos por encima de otros, PERO si estos elementos no están superpuestos mediante posicionamiento tú no lo VES. ¿Te queda claro ahora?
amatulo
Os agradezco la ayuda pero, aunque no lo parezca, conozco bastante a fondo los conceptos básicos del CSS. Como creo haber dejado claro en el primer mensaje, mi duda era con el z-index, únicamente con el z-index. No soy ninguna eminencia pero creo entender de sobra casi todo lo demás. De verdad.
<fieldset>
La propiedad z-index funciona, quizá lo que deberías hacer es empaparte bien de qué es lo que hace esta propiedad: URL
</fieldset>
Lo dicho. De ahí lo de abrir este tema. La idea era buscar una explicación clara. Si me vas a redirigir a Google ni me molesto en empezar un nuevo tema ¿no?
<fieldset>
Si tú tienes dos elementos superpuestos (de la manera que sea) con el z-index controlas el que está por encima. Pero el z-index por si sólo NO va a hacer que un elemento se posicione encima de otro (para eso están los posicionamientos).
</fieldset>
Por lo que creo entender aquí, para utilizar el z-index, tengo que tener los elementos en absolute y a partir de ahí ya le doy la profundidad que deseo a cada uno? Pensé que con 3 elementos y la posición relativa al contenedor también se podía utilizar. De no ser así, éste era mi fallo.
Gracias.
orange
Amatulo
Ya sé que se puede hacer con position:absolute pero lo que intento comprender es por qué no me funciona el z-index. Con posición absoluta me funciona con z-index o sin él. No aportaría nada.
La propiedad z-index funciona, quizá lo que deberías hacer es empaparte bien de qué es lo que hace esta propiedad: http://www.google.es/search?q=z-index&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:es-ES:official&client=firefox-a
Si tú tienes dos elementos superpuestos (de la manera que sea) con el z-index controlas el que está por encima. Pero el z-index por si sólo NO va a hacer que un elemento se posicione encima de otro (para eso están los posicionamientos).
zigotica
es algo antiguo y está en inglés, pero vale la pena leerlo (es un clásico):
http://www.brainjar.com/css/positioning/
zigotica
no te lo tomes mal, pero creo que estaria bien que hicieras un poco de codos con los conceptos básicos.
position: relative; los elementos se posicionan uno detrás de otro
position: absolute; los elementos salen del flujo de la página y se posicionan por coordenadas (top/right/bottom/left). necesita un eje de coordenadas de un elemento padre (para tomar la referencia del 0,0)
float: tambien saca los elementos del flujo y para que su padre tenga altura debes limpiar el float al final del elemento. eso hace que el siguiente elemento se posicione al final de éste, si es relative, claro. si no limpias el float, el padre no tendrá altura, por lo que el elemento siguiente quedará escondido debajo (no al final).
por tanto, para que el footer quede encima (superpuesto) del final de los flotados, debes limpiar el float para darle altura al contenedor y posicionar el footer en absoluto para poder ponerle bottom: 0px
amatulo
orange
Pues porque estás mezclando churras con merinas.
Resumen:
- Posiciona el contenedor en relative
- Los dos divs que van a los lados flotados
- El pie en absoluto, que lo tienes en relativo
- Invéntate algo para que el contenido de los flotados no se meta debajo del absoluto (generalmente un padding por debajo a los flotados)
Es sencillo
Aquí hay algo que no pillo:
-Contenedor en relative.
-Divs flotados (ya lo pongo en la imagen)
-Pie en absoluto? ¿Para que necesitaría entonces el z-index?
-Como ya he comentado, esto se basa en el ejemplo de las 2 columnas con padding-bottom:xxxxxx y margin-bottom:xxxxxxx
Ya sé que se puede hacer con position:absolute pero lo que intento comprender es por qué no me funciona el z-index. Con posición absoluta me funciona con z-index o sin él. No aportaría nada.
Espero haberme expresado con claridad. Gracias por la ayuda.
orange
Pues porque estás mezclando churras con merinas.
Resumen:
- Posiciona el contenedor en relative
- Los dos divs que van a los lados flotados
- El pie en absoluto, que lo tienes en relativo
- Invéntate algo para que el contenido de los flotados no se meta debajo del absoluto (generalmente un padding por debajo a los flotados)
Es sencillo
amatulo
Eso es lo que hice en un principio. Está todo en este hilo.
Todo esto viene de que mi primer intento de hacerlo fué con un z-index y me he rallado porque no funcionaba. La cuestión es ¿Por qué me ignora el z-index? ¿Qué es lo que hago mal en este ejemplo?
zigotica
añade un clear despues de los 2 div float y dale position absolute al footer
amatulo
Esto es lo que quiero:
http://www.imaxenes.com/imagenes/ejemplo11tv9984.gif
Esto me hace:
http://www.imaxenes.com/imagenes/ejemplo21cp10jf.gif
Los 3 DIVS están dentro del DIV "contenido". ¿Qué es lo que falla?
amatulo
Gracias por la aclaración. Voy a intentar subir una imagen y os explico un poco mejor este caso concreto.
orange
El z-index vale para lo piensas, determinar la profundidad de una capa sobre otra.
Pero eso no quiere decir que por arte de magia puedas ir posicionar libremente unas capas sobre otras, ni que elimine las consecuencias de otras propiedades (float, position, etc).
Es decir que tú tienes que poner las capas donde quieres utilizando posicionamiento, y luego determinas cual es la profundidad de cada una con el z-index.
zigotica
ojo porque si estas flotando 2 capas, éstas se salen del flujo (como si fuera position:absolute), por tanto quedan por encima del resto de elementos, independientemente que apliques z-index. para que otro elemento quede encima suyo tendrás que limpiar el float y posicionar esa nueva capa por encima de forma absoluta.
si te fijas en la especificacion, z-index se aplica a elementos con posicion, y como el float quita el elemento del flujo...
prueba y me cuentas, que hace muuuucho que no toco CSS... :)
amatulo
No es el caso de flash. La duda viene a raiz de ESTE tema.
Tengo 2 columnas flotando e intento poner un footer por encima, pero no consigo evitar que sea empujado por las columnas de debajo. Si te he entendido bien, para que esto chute, ¿las 2 capas tienen que estar en la misma posicion? Si es así, con razón no me funcionaba.
zigotica
si estás probando de "esconder" un formulario debajo de una capa normal, o un elemento flash debajo de un elemento de formulario: no-can-do. enel caso del flash puedes pero usando wmode transparent (nada recomendable segun lso expertor). en los dos casos una solucion es meter el flash o el form en una capa y esconder la capa.
para elementos normales, si tienes algun problema es que las capas no estan en la misma posicion.