Cómo organizar estos DIV con z-index

B

[Borrado] #1 Ene '12

Se me presenta el siguiente diseño:

Y el código que he utilizado para implementar lo anterior es el siguiente:

<DIV 1>

  <DIV 2>
  </DIV>

  <DIV 3>
  </DIV 3>

</DIV>

Donde DIV 1 tiene posición relativa y DIV 3 posición absoluta para que guarde esa posición que tiene a la izquierda respecto al DIV 1. Le he dado un z-index -1 al DIV 3 y obviamente me lo hace mal porque esta propiedad sólo funciona con elementos que estén uno a continuación de otro, y no en jerarquía. Una solución clara es sacar el DIV 3 fuera, para que el z-index afecte al DIV 1, pero es que necesito que el DIV guarde posición absoluta respecto a la relativa que tiene el 1 para poder poner es div a la izquierda del otro.

No sé si me habré explicado bien. :S Pero entre el cabreo y demás, no articulo palabras.

GreyShock #2 Ene '12

Mi pregunta es para que sirven los z-index en este caso? Según el dibujo lo que planteas se puede hacer sin z-index fácilmente... de hecho, aún no sé en que interviene el z-index

eXtreM3 #3 Ene '12

No te hace falta el z-index.

Pon que div1 y div3 tengan float:left, y a div3 le pones position:fixed para que siempre quede fijo en una posición.

Después metes div2 con position:relative dentro de div1 y a volar.

No se te olvide hacer un clear:both después de cerrar la última capa.

B

[Borrado] #4 Ene '12

Gracias por contestar los dos. Acabo de revisar mi post y con lógica no véis sentido a los z-index. Perdonadme pero es que me he expresado como el culo. He actualizado el post de arriba con la nueva imagen.

Necesito que la capa morada quede la mitad por debajo de la capa negra, y la otra mitad al descubierto. Entonces aquí en este caso yo creo que si hace falta z-index ¿no?

Y según como tengo mi código lo único que consigo es poner la capa morada debajo de la roja, ¡pero sigue encima de la negra!

GreyShock #5 Ene '12

puedes hacer que el violeta se el padre del negro, y el negro el padre del rojo, y te ahorras los z-index.. no?

B

[Borrado] #6 Ene '12

Sí, optaré por eso. Lo pensé pero me parecía que a lo mejor era un poco chapucero (no me interpretes como que sea mala tu idea eh xD) pero viendo lo que hay parece que es imposible hacerlo de la forma que quiero.

Gracias una vez más.

GreyShock #7 Ene '12

Yo creo que, mientras no afecte al rendimiento, lo importante es como se vea y no cómo "esté escrito" Z-index puede dar problemas en según que navegadores, así que la opción de poner al div pequeño como padre y moverlo de forma relativa a su posición original me parece adecuado en este caso.

Ya nos lo enseñarás cuando lo tengas!

Cómo organizar estos DIV con z-index

Usuarios habituales

Tags