Foros del Web » Creando para Internet » CSS »

Problema con z-index

Estas en el tema de Problema con z-index en el foro de CSS en Foros del Web. Hola foristas, este es mi codigo: Código HTML: <html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1" > <style type= "text/css" > body {margin:0;} ul {margin:0;padding:0;} li ...
  #1 (permalink)  
Antiguo 31/07/2008, 15:12
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Problema con z-index

Hola foristas, este es mi codigo:

Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0;}
ul {margin:0;padding:0;} 
li {list-style:none;}
div.principal {width:700px;}
div.izq {width:100px;float:left;position:relative;background:#FF0000;}
div.cen {width:500px;float:left;position:relative;}

div.menu {width:100%;}
div.menu ul li {position:relative;}
div.menu ul li a {display:block;position:relative;line-height:18px;}
div.menu ul li a:hover {background:#DAD3D3;}
div.menu ul li ul {width:100px;display:none;position:absolute;left:100px;top:0;z-index:2;}

div.add {width:300px;position:relative;background:#00CCCC;}
div.add2 {width:300px;position:relative;background:#CCFF33;}
</style>
<script language="JavaScript">
function prueba(llama)
{
  var aaa = llama.parentNode.getElementsByTagName('ul')[0];
  aaa.style.display = aaa.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<div class="principal">
  <div class="izq">
    <div class="menu">
      <ul>
        <li onMouseOver="prueba(this)" onMouseOut="prueba(this)"><a href="#">PRUEBA MENU</a>
          <ul>
            <li><a href="#">aaaaaa</a></li>
            <li><a href="#">bbbbbb</a></li>
            <li><a href="#">cccccc</a></li>
          </ul>
        </li>
        <li><a href="#">PRUEBA NADA</a></li>
      </ul>
    </div>
  </div>
  <div class="cen">
    <div class="add">
      prueba prueba prueba prueba<br>
      prueba prueba prueba prueba<br>
      prueba prueba prueba prueba<br>
      prueba prueba prueba prueba<br>
    </div>
    <div class="add2">
      agregar agregar agregar <br>
      agregar agregar agregar <br>
      agregar agregar agregar <br>
      agregar agregar agregar <br>
    </div>
  </div>
</div>
</body>
</html> 
Es simple para que puedan ver el problema. Yo del lado izquierdo tengo un javascript que al pasar el mouse por arriba me aparece un submenu. En FF funciona bien ponerle z-index al <ul> que sería el submenu, pero en IE no se superpone, como que queda tapado... como lo puedo solucionar ??

Espero puedan entender el problema y desde ya muchísimas gracias.

Saludos
  #2 (permalink)  
Antiguo 31/07/2008, 15:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con z-index

En explorer lo primero debes hacer es equilibrar fuerzas entre hermanos o cajas del mismo nivel, porque un hijo de un div A, que esté por debajo de un div B, nunca podrá pasar por encima del div B mientras no lo haga su padre (div A), y por mucho z-index que pongas. Esto sólo explorer, porque el resto sí saben hacerlo.

En tu caso concreto, añade z-index: 2 a div.izq, porque como es hermano de div.cen y está antes en el flujo del documento, si no lo pones por encima nada de lo que haya dentro de él pasará pr encima de div.cen.

Espero que me hayas entenedido.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 31/07/2008, 18:10
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Problema con z-index

Muchísimas gracias, como siempre. Ahora entendí un poco mejor este tema.

Yo tenía entendido que el z-index actuaba en forma general, es decir, sin importar los div hermano o padre, yo pensaba que al ponerle z:index:2 a un div, y otro div tenía el z-index:1 ... entonces sí o sí se iba a superponer.

Eso pensaba, pero siempre se sigue aprendiendo.
Nuevamente muchas gracias y problema solucionado.

Saludos
  #4 (permalink)  
Antiguo 01/08/2008, 02:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con z-index

Pensabas eso y estabas en lo cierto, porque en la especificación de CSS es así, pero como te decía ese es un problema de Explorer, por eso te funcionaba en FF y no en IE.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 01/08/2008, 09:57
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Problema con z-index

Buenísimo, muchas gracias Mikmoro.
  #6 (permalink)  
Antiguo 10/09/2009, 08:25
 
Fecha de Ingreso: septiembre-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Problema con z-index

Tambien estoy teniendo un problema similar y no le encuentro solucion. Espero puedan ayudarme.

Tengo un div contenedor, y dentro de el un menu a la izquierda (que se expande ocupando parte del div cont) y un div cont apenas separados unos pixels. Si presiono sobre el menu dentro de este margen de separacion, el comportamiento es el esperado, cuando se expande. Si en cambio presiono para expandirlo, con el mouse sobre la capa cont, se oculta rapidamente haciendo dificil la navegacion. Esto si cont tiene contenido que ocupe toda la pantalla, digamos si no se le coloca nada no.

Con Firefox anda bien, pero no con IE, por lo que llegue a entender que es un problema de implementacion de IE y z-index.

Desde ya muchas gracias por su tiempo y ayuda.

Les paso el codigo:

html {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

#mad {
position: absolute;
margin: 20px 17px 20px 17px;
padding: 0;
left: 0;
right: 0;
top: 0;
width: auto;
height: 95%;
z-index: 0;
}

#msp {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 153px;
height: 107px;
}

#msp p {
margin: 0;
padding: 0;
}

#msp img {
margin: 0;
padding: 0;
}

#enc {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 0;
width: auto;
height: 107px;
}

#enc p {
margin: 0;
padding: 0;
}

#enc img {
margin: 0;
padding: 0;
}

#menu {
position: absolute;
left: 0;
top: 114px;
width: 153px;
height: auto;
padding: 0;
margin: 0;
z-index: 999;
}

#menu p {
margin: 0;
padding: 0px 2px 6px 6px;
}

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
width: 153px; /* ancho menu principal */
border-bottom: 1px solid #185B92; /* azul */
}

#menu ul li{
position: relative;
color: white; /* letra blanca */
background-color: #3183A7; /* azulado */
border-bottom: 1px solid #185B92; /* azul */
border-right: 1px solid #185B92; /* azul */
}

/* menu principal con link */
#menu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white; /* letra blanca */
text-decoration: none;
padding: 6px;
}

/* fondo opcion */
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active{
background-color: #3183A7; /* azulado */
color: white;
}

#menu ul li a:hover{
/* color al resaltar */
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
}

/* sub menu */
#menu ul li ul{
position: absolute;
width: 153px;
top: 0;
visibility: hidden;
}

#menu a.submenu{
background: url("../img/fdb.gif") no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */

#cont {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 114px;
height: auto;
width: auto;
z-index: 1;
}

#cont p {
margin: 0;
padding: 2px 10px 2px 10px;
}

#cont img {
margin: 0;
}

HTML =>

<html>
<head>
<link media="screen" href="../css/est.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/menu.js"></script>
</head>

<body>

<div id="mad">

<div id="msp">
<p><IMG SRC="../img/msp.gif" WIDTH="153" HEIGHT="107" BORDER="0" ALT="Msp"></p>
</div>

<div id="enc">
<p><IMG SRC="../img/enc.gif" WIDTH="586" HEIGHT="107" BORDER="0" ALT="MSP"></p>
</div>

<div id="menu">
<p>
<ul id="menuu1">
<li><a href="#">Datos Personales</a>
<ul>
<li class="sl">Cargar</li>
<li><a href="#">Visualizar</a></li>
<li><a href="#">Estad&Iacute;sticas Perfil</a></li>
</ul>
</li>
<li><a href="#">Datos Acad&eacute;micos</a>
<ul>
<li><a href="#">Promociones</a></li>
<li><a href="#">Calificaciones</a></li>
<li><a href="#">Asistencias</a></li>
<li><a href="#">Tesis</a></li>
<li><a href="#">Titulos</a></li>
<li><a href="#">Informes</a>
<ul>
<li><a href="#">Inf 1</a></li>
<li><a href="#">Inf 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<br>

</div>

<div id="cont">
<p>Aca va mucho contenido, que tapa la capa menu</p>
</div>

</div>

</body>
</html>
  #7 (permalink)  
Antiguo 10/09/2009, 13:56
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con z-index

Hola:

Este tema tiene más de un año, no deberías reabrir temas antiguos. Por tu bien es mejor que, en un caso así, abras un tema nuevo.

¿Puedes poner la URL? Ya se que al ser nuevo el foro no te permite poner enlaces, pero puedes ponerlo sin http ni www, es decir, misitio.com

Saludos.



P.D.: De todas formas te recomiendo este enlace.

Última edición por jomaruro; 10/09/2009 a las 15:22
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:10.