Aprende como posicionar elementos uno arriba de otro con la propiedad de CSS llamada z-index.
Uno de los problemas mas comunes a la hora de estar trabajando con diferentes elementos visuales puede ser la superposición de estos, el mas típico ejemplo es el slideshow que se posiciona visualmente arriba de algunos elementos como un menú fijo.
Por suerte la solución a estos problemas es muy sencillo, ya que existe una propiedad CSS llamada z-index que nos permite manejar los elementos como si fueran capas permitiéndonos decidir que elemento aparecerá arriba de otro. Al principio esto es complicado de entender dado que solemos ver la web en 2 dimensiones y las representamos con el ancho y alto, pero también existe la profundidad y es lo que la propiedad z-index nos permite controlar.
La forma en la que funciona es sencillo y para explicarlo vamos a utilizar el siguiente ejemplo en el que tenemos 2 cajas, una roja y una azul, la diferencia que tenemos es que una esta arriba de la otra, pero podemos modificarlo.
See the Pen Propiedad z-index by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
Como puedes ver en el código es realmente fácil, basta con agregar la propiedad z-index en los elementos que tengan conflicto y el valor que le pondremos depende de la profundidad que queramos, el elemento con el z-index mas elevado sera el que se muestre al frente. Podemos utilizar cualquier valor, desde 1 , hasta lo que queramos.
Puedes ver el ejemplo anterior y ver como la caja roja se muestra al frente porque tiene un z-index mayor al de la caja azul. Ya por ultimo me gustaría resaltar una cosa y es que los valores que recibe la propiedad z-indes son solo números enteros, por lo que no tenemos que agregar alguna medida como px, em, etc. Solo números enteros.
Hola, estoy haciendo una pagina web y realice el header dinámico con tu tutorial, pero el problema es que tengo un slideshow que realice con wowslider y por mas que uso en z-index no logro que se deje de superponer el slideshow al header. Será que me podrías ayudar?
Es muy extraño, con z-index se debería poder solucionar, tendría que ver el sitio web en funcionamiento para inspeccionar el código, lo que quizás puedas hacer es encerrar el slideshow en un contenedor div y a ese ponerle un z-index y al header otro quizás asi lo soluciones.
yo tenia ese error, pero ya lo resolvi con el z-index
Prueba a ver si es tambien q z-index lleva el wowslider mira todo el codigo se q es engorroso pero si lleva por ejemplo 7589 tu ponle 7900
en el tuto de las particulas no se bien como utilizar las particulas alguien que me ayude
hay que mencionar que para que funcione ambos debende tener position:absolute;
Llevo un par de días peleandome con esto, y no me había funcionado hasta que encontré este otro código, con el que me funcionó al instante. Quería compartirlo con vosotros porque pienso que este tutorial es muy bueno, sencillo y bien explicado.
Esto es lo que tuve que poner en el header para que me fucionase
#header {
position: relative;
z-index: 10000;
}
Hola oye necesito de tu ayuda, como le hgao me sal epor detras del Subtema
z index funciona en porcentajes? porque estoy manejando una pagina en porcentajes y no puedo hacer que quede
Creo que no.
tengo un problema, no se como solucionarlo, alguien que me ayude por favor.
Yo en vez de ponerle position:absolute; a cada uno de los elementos, uso la clase .container y ahí meto todo mi documento y le pongo el position:absolute
Hola, Estoy podria funcionar para jQuery por que estoy intentando hacer un conjunto de elementos, y que casa elemento se sobre ponga al otro y Pues queria saber si se puede de alguna manera Gracias
Hola Carlos Arturo, tengo un problema. Hice el menu abaptable a dispositivos como lo enseñaste al igual que un slideshow automatico como enseñaste peo el slideshow se superpone al menu a pesar de que utilice z-index en css sigue ocurriendo. ¿Me podrías ayudar? Adjunta dejare una imagen del error.