Foros del Web » Creando para Internet » CSS »

Mostrar un elemento por encima de otro

Estas en el tema de Mostrar un elemento por encima de otro en el foro de CSS en Foros del Web. ¡Hola! A ver si consigo explicar bien lo que pretendo. Tengo un div cuyas dimensiones son por ejemplo 500x500 píxeles. Dentro de este div tengo ...
  #1 (permalink)  
Antiguo 17/02/2011, 06:03
Avatar de AubeRoseau  
Fecha de Ingreso: diciembre-2010
Ubicación: Sevilla
Mensajes: 90
Antigüedad: 13 años, 3 meses
Puntos: 2
Mostrar un elemento por encima de otro

¡Hola! A ver si consigo explicar bien lo que pretendo.

Tengo un div cuyas dimensiones son por ejemplo 500x500 píxeles.
Dentro de este div tengo otro con las mismas dimensiones.
Y fuera del segundo div, pero dentro del primero, tengo otro con dimensiones inferiores. El caso es que pretendo que este último div se vea por encima del anterior, pero no sé como hacerlo. Dejo código:

Código HTML:
Ver original
  1. <div class="box1">
  2.         <div class="box2"> </div>
  3.          <div class="box3"> </div>
  4. </div>

Código CSS:
Ver original
  1. .box1 {
  2.     width: 500px;
  3.     height: 500px;
  4.     }
  5. .box2 {
  6.     width: 100%;
  7.     height: 100%;
  8.     }
  9. .box3 {
  10.     width: 100%;
  11.     height: 40px;
  12.     display: block;
  13.     position: relative;
  14.     bottom: 0;
  15.     margin-top: 440px;
  16.     }

El caso es que box3 no se ve. ¿Alguien sabe como solucionar esto?

Gracias de antemano.
  #2 (permalink)  
Antiguo 17/02/2011, 07:52
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Mostrar un elemento por encima de otro

Usando z-index que sólo funciona con objetos que tengan la propiedad position seteada como relative, fixed o absolute.

Código CSS:
Ver original
  1. .box1 {
  2.     position:absolute;
  3.     width: 500px;
  4.     height: 500px;
  5. }
  6. .box2 {
  7.     position:absolute;
  8.     width: 100&#37;;
  9.     height: 100%;
  10.     background: blue;
  11.     z-index: 1;
  12. }
  13. .box3 {
  14.     position:absolute;
  15.     width: 100%;
  16.     height: 40px;
  17.     margin-top: 440px;
  18.     background: red;
  19.     z-index: 2;
  20. }
  #3 (permalink)  
Antiguo 17/02/2011, 08:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Mostrar un elemento por encima de otro

Lógico que el tercero no se vea.
Los div´s son elementos de bloque, así que box3 se posiciona después (en la vertical) de box2 y por el tamaño de su padre (box1) queda fuera del área de visión.

Tampoco en este caso es necesario el z-index, por el orden en que aparecen en el html.
Sólo necesita posicionar box1 como relativo*, box2 como absoluto (en 0,0) y el 3 automáticamente subirá a la esquina superior izquierda de su contenedor.
  #4 (permalink)  
Antiguo 18/02/2011, 02:42
Avatar de AubeRoseau  
Fecha de Ingreso: diciembre-2010
Ubicación: Sevilla
Mensajes: 90
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar un elemento por encima de otro

Gracias por vuestra respuestas. He probado de las dos formas y las dos funcionan.

Ahora tengo un problema, aunque es con javascript lo pongo aquí por que está relacionado con el ejemplo.
Resulta que estoy escuchando un evento click en el elemento div box1, pero no quiero que se escuche el evento si al hacer click estoy sobre box3. No sé si me explico. Lo que ocurre es que al estar box3 sobre box1, al hacer click en box3 me escucha el evento que he programado para box1, y no quiero que esto sea así. ¿Alguna idea de como solucionarlo?
  #5 (permalink)  
Antiguo 18/02/2011, 07:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Mostrar un elemento por encima de otro

Cita:
Iniciado por AubeRoseau Ver Mensaje
Gracias por vuestra respuestas. He probado de las dos formas y las dos funcionan. <- de nada

Ahora tengo un problema, aunque es con javascript lo pongo aquí por que está relacionado con el ejemplo. <- No debería. Hay un foro específico para js. Amén de la mala práctica el encadenamiento de consultas diferentes.

Etiquetas: encima
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 01:50.