DIVs Superpuestos

Calisco · #1 (**permalink**) 01/06/2006, 11:57

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.

baccxus · #2 (**permalink**) 01/06/2006, 13:28

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

Calisco · #3 (**permalink**) 01/06/2006, 17:32

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.