Foros del Web » Creando para Internet » CSS »

DIVs Superpuestos

Estas en el tema de DIVs Superpuestos en el foro de CSS en Foros del Web. Quiero suporponer 2 divs como se muestra en el siguiente LINK Tengo tres capas. EL primer div0 contiene a los otros dos div1 y div2 ...
  #1 (permalink)  
Antiguo 01/06/2006, 12:57
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
DIVs Superpuestos

Quiero suporponer 2 divs como se muestra en el siguiente LINK

Tengo tres capas. EL primer div0 contiene a los otros dos div1 y div2.
EL codigo css es secillo:

.div0 {border: 1px solid #000;}


.div1
{
background: #F00;
width: 200px;
height: 200px;
z-index: 1;
position: relative;
}


.div2
{
border: 1px solid #000;
background: #FF0;

width: 200px; height: 200px;
position: relative;

top: -50; left: 100;
z-index: 2;
}


y finalmente el codigo html es muy sencillo:

Código PHP:
<body>
    <
div class="div0">
        <
div class="div1">div1</div>
        <
div class="div2">div2</div>
    </
div>
</
body
Mi objetivo es superponer el div2 sobre el div1; pero si se fijan bien, entre el div2 (fondo amarillo) y el div0 (borde negro, fondo blanco) hay una separacion. Yo se que en realidad no es una separacion, simplemente es que el div2 esta por debajo del div1, mas alla de que yo lo desplace con top y left.
Necesito que esto no pase. Que simplemente yo tenga una capa arriba de la otra y que no exista esa separacion.

No se si se entiende el problema. Se que mi explicacion no es clara, pero no se muy bien como redactarlo.

Saludos y Gracias desde ya.
__________________
| Cabeza De Raton |
  #2 (permalink)  
Antiguo 01/06/2006, 14:28
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
No se si esto es lo que quieres:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>

.div0
{
border: 1px solid #000;
position: relative;
width: 100%;
height: 400px;
}

.div1
{
background: #F00;
width: 200px;
height: 200px;
z-index: 1;
position: absolute;
top: 10px;
left: 10px;
}

.div2
{
border: 1px solid #000;
background: #FF0;
width: 200px; height: 200px;
position: absolute;
top: 9px; left: 9px;
z-index: 2;
}

</style>
</head>


<body>
	<div class="div0">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
	</div>
</body>
</html> 
Saludos
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 01/06/2006 a las 14:37
  #3 (permalink)  
Antiguo 01/06/2006, 18:32
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
No, la verdad que no es lo que quiero hacer. Para empezar, no puedo usar posiciones absolutas, ya que la idea es para utilizarlo en una ventana de edicion que se puede encontrar en diversas partes de la pagina.

Para ser mas claros, en condiciones normales la pagina deberia verse asi. En esta pagina simplemente se 'esconde' la capa div2 con display: none.
Luego, mediante algun tipo de script realizado en js, mostrar la capa div2.
Lo que se quiere es que las dimensiones del div0 (que es el que contiene a los otros dos divs) no modifique sus dimensiones.

Nuevamente no se si soy claro. Gracias baccxus de todos modos.
__________________
| Cabeza De Raton |
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 13:11.