problema con z-index y capas en ie

Danitm · #1 (**permalink**) 21/08/2008, 13:25

tengo un problema con z-index en internet explorer

y es que si pongo algo asi:

Código:

<div style="position:relative;width:100%;background-color:#0099FF;"><br />capa 1 azul<br />
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;z-index:999"><br />capa 1 verde<br /><br /><br /><br /></div>
</div><br /><br /><br /><br />
<div style="position:relative;width:100%;background-color:#0099FF;"><br />capa 2 azul<br />
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;z-index:999"><br />capa 2 verde<br /><br /><br /><br /></div>
</div>

lo normal es que se viera la capa 1 verde sobre la capa 2 azul pero en internet explorer se ve al revés. se ve la capa verde debajo de la azul y no se como hacer para que quede la verde por arriba.

¿alguien sabe solucionar esto?

un saludo y gracias

DragonX · #2 (**permalink**) 21/08/2008, 13:29

Sacale todos los <br />

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="position:relative;width:100%;background-color:#0099FF;">capa 1 azul
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;z-index:999">capa 1 verde</div>
</div>

<div style="position:relative;width:100%;background-color:#0099FF;">capa 2 azul
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;z-index:999">capa 2 verde</div>
</div>
</body>
</html>

Probado en IE 7 y IE6

Danitm · #3 (**permalink**) 21/08/2008, 13:40

los <br> los puse para ampliar el tamaño de esas capas, ya que en el script que estoy haciendo (2 menus horizontales) esas capas verdes son listas con enlaces y la lista de arriba queda por debajo del menu de abajo (capa 2 azul).

es indispensable que los menus esten uno debajo del otro y a esa distancia mas o menos, por lo que no me vale mover los menus pa evitar eso. esa seria mi ultima alternativa si no consigo que la capa verde se vea sobre la azul de abajo...

es q en todos los navegadores se respeta el z-index menos en ie y queria ademas aprender a solucionar este tipo de cosas.

Mikmoro · #4 (**permalink**) 21/08/2008, 15:29

Hazlo así:

Cita:

<div style="position:relative;width:100%;background-color:#0099FF;z-index:2"><br />capa 1 azul<br />
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;"><br />capa 1 verde<br /><br /><br /><br /></div>
</div><br /><br /><br /><br />
<div style="position:relative;width:100%;background-color:#0099FF;z-index:1"><br />capa 2 azul<br />
<div style="position:absolute;width:100px;background-color:#99cc66;border:1px solid black;"><br />capa 2 verde<br /><br /><br /><br /></div>
</div>

Es poco recomendable diseñar así, con los estilos en las etiquetas, pero bueno, esa era tu duda y esta es la solución.

Danitm · #5 (**permalink**) 21/08/2008, 17:30

ok gracias, así si me funciona. valla rollo con el ie