Superponer dos capas.

[aguila_393]

Mi pregunta es si se puede de alguna manera superponer dos capas. Es decir supongamos que yo tengo una capa con todo el contenido de la web, y despues arriba de eso quiero superponer otra capa con una imagen de fondo de manera que esa imagen se superponga sobre el resto de las capas. Nunca escuche que se pueda hacer pero creo que seria algo bastante practico.

[jalex16]

Esto se usa bastante para hacer popups, es cuestión de hacerla flotante y darle las coordenadas.
Esta es una opción:

Código HTML:

<div class="contenedor">
  <div class="foo"></div>
  <div class="bar">esta la moveremos sobre .foo</div>
</div>
 

Código CSS:

.contenedor{
  position: relative;
}
.bar{
  position: absolute;
  top: -20px;
  left: -10px;
}
 

Debes darle el tamaño a cada una.

[aguila_393]

Iniciado por jalex16

Esto se usa bastante para hacer popups, es cuestión de hacerla flotante y darle las coordenadas.
Esta es una opción:

Código HTML:

<div class="foo"></div>
<div class="bar">esta la moveremos sobre .foo</div>
 

Código CSS:

.bar{
  position: absolute;
  top: -20px;
  left: -10px;
}
 

Debes darle el tamaño a cada una.

También puedes mover una dentro de la otra, para esto div.foo (la capa contenedora) debe tener position: relative;

Pero de esa manera no se moveria la capa dependiendo de la resolucion de pantalla o navegador del usuario (siempre desconfie de las capas flotantes).

[jalex16]

No, es por eso que se usa una capa contenedora con posición relativa.
Ah sorry, viste el mensaje antes de que lo edite.

[sanxuan]

La manera más habitual es darles posicionamiento absoluto (position:absolute) y controlar mediante la propiedad z-index cuál queda por encima de la otra.
La capa con un z-index mayor quedará por encima de la otra.
Mediante posicionamiento absoluto puedes hacer que coincidan exactamente las dos capas.