Posicionar un div delante de otro

kidart · #1 (**permalink**) 14/03/2011, 14:45

Hola, queria consultarlos por el siguiente problema. Tengo una web con 2 divs que se superponen y queria establecer que uno este por delante del otro. a los dos los tengo ubicados con css, pero uno me pisa al otro y lo tapa (aunque son png transparentes)...

link

el codigo es el siguiente:

Código HTML:

Ver original.centered {
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -423px;
  margin-left: -428px;
  background-color: white;
  color: white;
} 
.right {
  position: absolute;
  top: 0%;
  left: 100%;
  margin-top: 0px;
  margin-left: -207px;
  background-color: white;
  color: white;
  visibility:visible;
  
  
} 
-->
</style></head>
 
<body>
<div class="left">
<img src="images/en-construccion.png" width="207" height="207" border="0" class="right"/></div>
 
<div class="centered">
<img src="images/bgrupo.png" width="847" height="656" border="0" usemap="#Map" />
 
<map name="Map" id="Map">
  <area shape="rect" coords="131,548,278,618" href="http://www.astridygaston.com/web/intro.php" target="_blank" />
  <area shape="rect" coords="284,548,440,617" href="http://www.aygcatering.com.ar/" target="_blank" />
  <area shape="rect" coords="441,547,550,621" href="http://www.belindacafe.com.ar/" target="_blank" />
  <area shape="rect" coords="551,541,648,617" href="http://www.torestaurant.com/" target="_blank" />
</map>
</div>

Alguna idea?

sanxuan · #2 (**permalink**) 14/03/2011, 14:58

Puedes controlar quién solapa a quién usando la propiedad z-index. Los valores más altos entre elementos "hermanos" (incluidos dentro de la misma etiqueta al mismo nivel) se superponen a los z-index de menor valor.
Aunque el fondo de los elementos sea una imagen transparente, al usar un color de fondo estás ocultando debajo todas las capas o elementos con un z-index inferior.
Salvo que se indique otra cosa en el css, las etiquetas que aparecen más abajo en el HTML ocultan a las anteriores en caso de solapamiento (hablando de etiquetas al mismo nivel).

gVenom · #3 (**permalink**) 14/03/2011, 15:02

Recuerda que si tus imagenes son png y lo estas viendo en IE6, la transparencia no te funcionará