Div Absoluto pero Relativo y Flotante; ¿Es posible?

¿Es posible crear un <div> de posición absoluta dentro de una tabla u otro div algo así como un "div absoluto pero relativo"?; Por ejemplo, muchas veces surge un reto difícil para todo diseñador web en el que necesita div's con información, imágenes u otro contenido los cuales queremos que tengan una posición absoluta respecto al punto donde ha sido diseñado, pero, una posición relativa para el resto de la página que está incluida por medio de un leguaje de servidor; Por ejemplo: Queremos tener un formulario dentro de una tabla que contenga una ventana de carga en la posición -100, -100, respecto a la tabla de login; así, creamos un div, dentro de ella con posición absoluta pero... ¡Sorpresa! Queda en posición absoluta respecto a la página viéndose cortado pues la posición es -100 -100; Algo así:



Otra posible aplicación sería la siguiente: Si tienes una imagen dentro de una tabla, por ejemplo, una camiseta sin dibujo; Y quieres insertar en el centro de la camiseta un DIV con otra imagen que quede por encima de la camiseta pero que cambie como cambie la web siempre esté la imagen situada dentro de la camiseta para poder cargar dinámicamente imágenes sobre la camiseta base, tendrías que insertar el div en cuestión a la posición exacta desde el punto donde sitúas el código del div con la posicionamiento absoluto, pero, tampoco quedaría bien, se vería en esa posición respecto a toda la página en si aún estando dentro de otro div o de una tabla.

¿Por que pasa esto? En Firefox es más facil de solucionar (Dado que no interpreta bien el código pues está bien que esto pase, no es un error, es así), pero en internet explorer se vuelve extremadamente complicado si no tienes claro los conceptos sobre los que estás trabajando:
Una posición absoluta en un DIV siempre será absoluta respecto al BODY a no ser, que en el camino entre el código del div y el body se encuentre un elemento de tipo bloque y ni las tablas ni los div son de tipo "block".

Para solucionarlo, es tan simple, como dar al objeto contenedor del div, al que queremos que marque la posición inicial, en el ejemplo de la imagen la tabla de formulario y en el de las camisetas el "div" o la "tabla" que contiene el dibujo de la camiseta en blanco (y el div del dibujo claro está), la propiedad block, lo cual se hace asignando un style tal que así: "<>...
" o bien "
".

Un sencilla solución para algo tremendamente útil y que estoy seguro ha causado más de un dolor de cabeza en muchas oficinas así como es interesante tener claro el concepto de el tipo de display de cada objeto html.

8 comentarios:

Anónimo dijo...

>> la propiedad block, lo cual se hace asignando un style tal que así: "<>...
" o bien "
".

No entendí. :-?

Anónimo dijo...

Se pasaron, creí que ya iba a iba a encontrar la solución a mi problema, qué es eso?????

tal que así: "<>... " o bien "
".

Anónimo dijo...

Eres Grande :D

Para al de arriba: style="display:block"

Anónimo dijo...

hola mi nombre es aldo.

para ahcer lo que quieres, tienes que poner el primer div contenedor ccn position:relative

y leugo los que metas dentro de este div relativo, serrán absolutos a ese div

salu2 Aldo1982

aldo1982 dijo...

en si la pregunta la tendrías que forrmular como

Div Absoluto dentro de div relativo :D


salu2 nuevamente

Anónimo dijo...

-div- style="position:absolute; top:80px; left:80px;" runat="server" Height="750px" Width="950px">goghmnglgh -div-

Javier dijo...

OMendoza, esta es una de las pocas web de habla hispana que da una solucion a este problemon, pero honestamente, me quede perdido en la ultima parte y como que no me sale ...

pudieras colgar un ejemplo para asi poderse guiar mejor....

salu2

Anónimo dijo...

io = no le entendi a la primera pero, ps les dejo un
ejemplo: mi objeto a establecer es un login dentro de una tabla

[table style="display:block"}

El objeto a manipular

[/table]

Publicar un comentario