DIV Flotante posicion absoluta pero relativa a otro DIV

quebien · #1 (**permalink**) 11/06/2009, 18:17

Hola!
Estuve buscando horas y horas para solucionar este problema y no encuentro la solucion o al menos a mi no me anda!

Quiero hacer que un DIV aparezca flotando pero relativo a otro DIV. Algo asi:

Código:

    -----------------
   |                 |
   |                 |
   |               __|____
   |              |       |
    --------------|       |
                  |_______|

El que deberia flotar es el recuadro mas chico, arriba del otro.

Probe con z-index, posicion absoluta y relativa, etc... Pero no lo puedo hacer.

¿Alguien sabria ayudarme con esto?

Gracias por adelantado!!!

quebien · #2 (**permalink**) 11/06/2009, 20:36

Sigo haciendo pruebas y me di cuenta que el problema es el DOCTYPE.

Con este DOCTYPE anda bien:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Pero con este no anda:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

El código HTML es este:

Código:

<html>
<body>

<div style="width:400px;height:200px;background:silver">
	<div style="width:200px;height:100px;background:orange;padding:20px;position:relative;top:150;left:250">hola
	</div>
</div>

</body>
</html>

No tengo ni idea porque con un DOCTYPE anda y con el otro no...

Triby · #3 (**permalink**) 11/06/2009, 21:29

Al primer div aplicale posicion relativa, de lo contrario el pequeño se posicionara respecto a body. Un ejemplo: http://www.araudi.net/ejemplos/transparencia.html

quebien · #4 (**permalink**) 11/06/2009, 21:39

SIIIIIIIIIIII!!!! con eso anduvo!!!

No te miento si te digo que el dia de hoy estuve masomenos seis horas tratando de solucionarlo! Inclusive entre a esa pagina que me pasaste, pero no encontre un ejemplo para lo que necesitaba yo.

La verdad no entiendo porque le tengo que poner position:relative al elemento superior. Pero con el tiempo que me llevo no me voy a quedar con la duda y voy a averiguarlo.

GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Mikmoro · #5 (**permalink**) 12/06/2009, 08:11

Cita:

Iniciado por quebien

La verdad no entiendo porque le tengo que poner position:relative al elemento superior. Pero con el tiempo que me llevo no me voy a quedar con la duda y voy a averiguarlo.

Es fácil: un elemento con posición absoluta se colocará con arreglo a unas coordenadas (top, right, bottom, left), y lo hará en base a su contenedor que tenga posición relativa o absoluta, y si ninguno de sus ancestros la tiene, con respecto al HTML.
Osea: si una caja tiene posición relativa, sus hijos con posición absoluta se colocarán con arreglo a las coordenadas con respecto a ella.