Feedback de posición y tamaño en Javascript

Uno de los problemas de maquetar con position:absolute es que si tenemos elementos flexibles no será fácil hacer que nuestro diseño se ajuste a ellos y tendremos que optar por la maquetación con float:left, float:right y clear:both.

Una manera alternativa de poder maquetar con position:absolute, siempre que no tengamos que cumplir las normas WAI, es utilizar javascript para recolocar los elementos. Las características que voy a explicar, por otro lado, son perfectamente compatibles con todos los navegadores de PC y gran parte de los navegadores de dispositivos portátiles, siempre que tengamos soporte para Javascript activado.

Una vez hemos colocado un elemento con position:absolute a priori será muy dificil -al menos hasta donde llega lo que he visto por internet- obtener el alto si sólo hemos prefijado el ancho. Es posible, mediante técnicas, colocar un bloque justo a continuación del bloque position:absolute, pero para ello hay que cumplir una serie de requisitos que hacen impracticable la solución en la mayoría de los casos.

Pero gracias a varias propiedades accesibles desde Javascript podremos obtener el alto una vez inyectado el contenido dinámico, sin problemas y -por fin- ajustar el resto de los bloques de la web a estas nuevas dimensiones.

El primer paso es obtener la referencia al bloque que queremos, para ello usaremos:

• var elemento1 = document.getElementById("id_del_bloque");

A continuación, si el bloque es un div (y en otros casos también) dispondremos de las propiedades offset, incluso para elementos con posicionamiento float, relativo o sin position, concretamente:

• elemento1.offsetLeft nos devolverá la posición izquierda dentro del canvas de la página en píxeles.
• elemento1.offsetTop nos devolverá la posición superior.
• elemento1.offsetWidth nos dará el ancho, y, por fin,
• elemento1.offsetHeight nos devolverá el alto, una vez tenido en cuenta el contenido.

Con elemento1.offsetHeight+elemento1.offsetTop ya podremos obtener un valor para inyectar, una vez hechos los cálculos oportunos (teniendo en cuenta la posición del padre, si lo hay) en elemento2.style.top, donde elemento2 se obtiene con document.getElementById igual que la referencia a elemento1.

Estas propiedades son compatibles con IE, Firefox, Safari, Chrome, Opera y otros muchos navegadores.

Más info: http://www.quirksmode.org/dom/w3c_cssom.html