Foros del Web » Creando para Internet » CSS »

Superponer dos capas.

Estas en el tema de Superponer dos capas. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/01/2011, 22:31
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Superponer dos capas.

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.
  #2 (permalink)  
Antiguo 15/01/2011, 22:58
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Superponer dos capas.

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:
Ver original
  1. <div class="contenedor">
  2.   <div class="foo"></div>
  3.   <div class="bar">esta la moveremos sobre .foo</div>
  4. </div>
Código CSS:
Ver original
  1. .contenedor{
  2.   position: relative;
  3. }
  4. .bar{
  5.   position: absolute;
  6.   top: -20px;
  7.   left: -10px;
  8. }
Debes darle el tamaño a cada una.
  #3 (permalink)  
Antiguo 15/01/2011, 23:03
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Superponer dos capas.

Cita:
Iniciado por jalex16 Ver Mensaje
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:
Ver original
  1. <div class="foo"></div>
  2. <div class="bar">esta la moveremos sobre .foo</div>
Código CSS:
Ver original
  1. .bar{
  2.   position: absolute;
  3.   top: -20px;
  4.   left: -10px;
  5. }
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).
  #4 (permalink)  
Antiguo 15/01/2011, 23:09
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Superponer dos capas.

No, es por eso que se usa una capa contenedora con posición relativa.
Ah sorry, viste el mensaje antes de que lo edite.
  #5 (permalink)  
Antiguo 16/01/2011, 06:34
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Superponer dos capas.

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.

Etiquetas: capas, dos, superponer
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 09:11.