Getting absolute position of an element relative to browser

Question

I have a div set to the css class float with float being:

.float {
display:block; 
position:fixed; 
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}

This class causes the element to stay in a fixed position on the page (the *html part is to make it work in IE). I am using javascript to shift the position of the element horizontally and vertically.

I need to get the absolute position of the div relative to the browser window in javascript (how many pixels from the top and left of the browser window the div is). Right now, I am using the following:

pos_left = document.getElementById('container').offsetLeft;
pos_top = document.getElementById('container').offsetTop;

The code above works for IE, Chrome, and FF, but in Opera it returns 0 for both. I need a solution that works for all of those browsers. Any ideas?

Btw: Keeping tracking of the changes made by javascript is possible, but that is not the solution I am looking for due to performance reasons. Also, I am not using jquery.

Answer 1

Maybe you should start using jQuery ;-)

http://jqueryui.com/demos/position/

Or at least get their non-minified version and see what they are doing.

Answer 2

If you can use items style element;

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;">

You can get it with element style attribute;

var top = eval(document.getElementById('container').style.top.split('px')[0]); // This row returns 20

You can use top, left, width, height etc...

Answer 3

You may find clues here : http://code.google.com/p/doctype/wiki/ArticlePageOffset But I think you'll need to add the parents' offsets to have the right value.