Posición X e Y de un elemento HTML en la pantalla

Cuando queremos saber la posicion X e Y (o el top y el left segun css) de un elemento en la pantalla, sólo podemos saberlo por javascript con el offset… Y luego viene el problema del crossbrowser…

La mayoría de las veces es porque queremos mostrar una capa que está oculta justo debajo de un enlace, boton, … Si se replantea el problema, podemos colocar esa capa debajo de la capa que queramos sin necesidad de usar javascript mas que para mostrarla.

Hace poco desarrollé unos estilos para una capa (que llamé relative00) con estos estilos:
[code lang=»css»]
/**css**/
.relative00{float:left; clear:both; position:relative; width:0; height:0; top:0; left:0;}
.desplegable{position:absolute; display:none; left:1em; top:1em; }
[/code]

[code lang=»html»]

• Opciones

[/code]

Luego por javascript nada más que nos quedaría tratar que si hacemos un click sobre el span, el div con la clase desplegable cambiase de display:none a display:block;

Además, yo soy de los que prefiere poner todas las capas en relativo para así poder controlar mucho mejor el z-index si estamos en aplicaciones complejas.

Pretendo poneros una demo de cómo funciona