Superponer Capa...

Ugho · #1 (**permalink**) 05/06/2007, 10:36

Estimados amigos:
estoy tratajando con capas y quisiera colocar una capa delante de otra mediante z-index pero no me resulta....el problema es que tengo una DIV dentro de otra y de acuerdo a como lo tengo implementado mi pagina necesito trabajarlo asi ...este es mi codigo.

Cita:

Código PHP:

  <HTML>
<HEAD>
<TITLE>No me funciona </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV id="black" STYLE="position:absolute; font-size:100px; font-family:impact; top:110px; left:10px; color:black; z-index:2">
HTML
<DIV id="gray" STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:15px; color:gray; z-index:1">
HTML
</DIV> 
</DIV> 
</BODY>
</HTML>

Si alguien puede ayudarme se los agradecería...en este ejemplo practico, la idea es que quede la palabra HTML con letra negra y sombra gris.
Saludos y gracias de antemano....

k4k4 · #2 (**permalink**) 05/06/2007, 11:35

Hola,

hmm, aquí hay una muy buena explicación de porque no obtienes el resultado que esperas: css-discuss.incutio.com/?page=OverlappingAndZIndex.

Básicamente, es el contexto, en inglés: stacking context. Como tienes un div posicionado absolutamente dentro de otro, cada uno tiene contexto diferente y el z-index sólo afecta a los elementos que estan en un mismo contexto.

Una posible solución sería que manejaras otra capa a manera de contenedor para que los divs posicionados estuvieran en el mismo contexto, por ejemplo:

Código PHP:

  <div id="container"> 
  <DIV id="black" STYLE="position:absolute; font-size:100px; 
                                  font-family:impact; top:15px; left:10px; 
                                  color:black; z-index:5"> 
         HTML 
   </DIV>  
   <DIV id="gray" STYLE="position:absolute; font-size:100px;  
                                  font-family:impact; top:19px; left:15px;  
                                  color:gray; z-index:0"> 
         HTML 
   </DIV>  
</div>

Otra solución es usar un z-index negativo para la capa gris con la ventaja de que no hay que hacer cambios en la estructura del documento. (Aunque yo preferiría controlar mis contextos...)

Saludos.

Ugho · #3 (**permalink**) 05/06/2007, 12:01

Muchas gracias k4k4:
con la opcion z-index: -1 me basta y sobra para lo que requiero...
Saludos