Foros del Web » Creando para Internet » CSS »

Problemas z-index

Estas en el tema de Problemas z-index en el foro de CSS en Foros del Web. Hola Tengo un problemilla estoy haciendo unas animaciones muy basicas en DHTML hay un poco de javascript css y html. el codigo és este: Código ...
  #1 (permalink)  
Antiguo 06/04/2011, 05:27
 
Fecha de Ingreso: enero-2011
Ubicación: Barcelona
Mensajes: 79
Antigüedad: 6 años, 11 meses
Puntos: 1
Problemas z-index

Hola

Tengo un problemilla estoy haciendo unas animaciones muy basicas en DHTML hay un poco de javascript css y html.

el codigo és este:
Código HTML:
<body>
    
<!-- barra herramientas -->
    
<div id="barra" style="position:absolute; width:31px; height:475px; left: 0px; top: 0px; visibility: visible; z-index: 0;">  
     <img src="images/tools/BarraLateral.png" width="31px" height="475px">
</div>
<div id="ocultar" style="position:absolute; width:25px; height:25px; left: 3px; top: 3px; visibility: visible; z-index: 3;">	   		
    <a href="#"><img src="images/tools/ocultar.png" style="width:25px; height:25px;" border="0" onClick="ensenyar('i3')"></a> 
</div>

<!-- tot -->
    
<div style="width:510px; height:475px; overflow:hidden; left: 31px; position: absolute;top: 0px;">
    <div id="imgcos" style="width:510px; height:475px;"> 
     
<!-- fixe -->
        
        <div id="base" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index: 0; "><img src="images/base/phloemxylem_base.png"  width="510px" height="475px" ></div>    
        
        <div id="base2" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index: 8; "><img src="images/base/phloemxylem_b3.png"  width="510px" height="475px" ></div>        
          
        <div id="i3" style="position:absolute; display:true; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top.png"  width="510px" height="475px"  border="0" usemap="#top"></div>          
        
<!-- movible --> 
    
        <div id="i1" style="display:none;"> 
            <div id="b1" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b1.gif" width="510px" height="475px"></div>  
            <div id="b4" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b4.png" width="510px" height="475px"></div>   
            <div id="top1" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top1.png"  width="510px" height="475px"  border="0" usemap="#top1"></div>
        </div>

        <div id="i2" style="display:none;"> 
            <div id="b2" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b2.gif" width="510px" height="475px"></div>  
            <div id="b5" style="position:absolute; left: 0px; top: 0px;z-index: 3; "><img id="img1" src="images/base/phloemxylem_b5.png" width="510px" height="475px"></div>   
            <div id="top2" style="position:absolute; width:510px; height:475px; left: 0px; top: 0px; visibility: show; z-index:9"><img src="images/base/phloemxylem_top2.png"  width="510px" height="475px"  border="0" usemap="#top2"></div>
        </div>



        </div>

        <!-- √°reas -->
    <map name="top">
      <area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
      <area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">

  </map>          

    <map name="top1">
      <area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
      <area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">
      <area shape="circle" coords="164,228,7" href="#" onClick="ensenyar2('txt1')">
</map>
      
    <map name="top2">
      <area shape="rect" coords="366,36,489,65" href="#" onClick="ensenyar('i1')">
      <area shape="rect" coords="366,75,489,104" href="#" onClick="ensenyar('i2')">
      <area shape="circle" coords="163,142,7" href="#" onClick="ensenyar2('txt2')">
</map>

    </div>
</div>

<!-- capas idiomas -->
    
<div id="txt1" style="display:none;"> 
         <div id="ba1" style="position:absolute; left: 31px; top: 0px;z-index: 6; "><img id="img1" src="images/base/phloemxylem_b6.png" width="510px" height="475px"></div>  
         <div id="bt1" style="position:absolute; width:510px; height:475px; left: 31px; top: 0px; z-index: 6">
            <a href="#">
                <script >document.write('<IMG SRC="images/' + idlang + '/phloemxylem_i1.png">')</script>
            </a>  
        </div>
</div>
    
<div id="txt2" style="display:none;"> 
         <div id="ba2" style="position:absolute; left: 31px; top: 0px;z-index: 6; "><img id="img1" src="images/base/phloemxylem_b7.png" width="510px" height="475px"></div>  
         <div id="bt2" style="position:absolute; width:510px; height:475px; left: 31px; top: 0px; z-index: 6">
            <a href="#">
                <script >document.write('<IMG SRC="images/' + idlang + '/phloemxylem_i2.png">')</script>
            </a>  
        </div>
</div>
         
</body>
</html> 
Como podeis ver en algunos div son contenedores para que todos hagan lo mismo a la vez.

Eso me da el problema que cada div del interior tiene z-index diferentes.
(exemplo: en el id="i1" hay capas de z-index 3y la top1 que está en la z-index 9, el en txt1 todas estás en z-index 6 y por lo tanto deveria quedar por encima de las capas b y por debajo de la top. Eso me lo hace, el probema es que lo hace después de ejecutar la función, mientras dura la función el div id="txt1" queda por debajo de todas las capas del id="i1" y cuando termina me las coloca en su sitio.)

No se si me he exresado con demasiada claridad (cualquier duda pregunten), pero agradeceria cualquier pista o solución que pudieran darme.

Muchas gracias
  #2 (permalink)  
Antiguo 06/04/2011, 06:08
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas z-index

Hola iktmaster, en este hilo hablamos sobre el tema que te ocupa, pegale una mirada y cualquier cosa pregunta y lo vemos.
Un abrazo.
  #3 (permalink)  
Antiguo 06/04/2011, 06:09
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Problemas z-index

Hola

SI lo de Zindex te funciona bien , lo mas seguro es que sea algo de tu escript que tienes que decirle hasta que no haya terminado de leer la funcion no haga nada , esa es mi opinion

Etiquetas: z-index
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 21:05.