ansaurus

Question

Get the absolute position of a div relative to the window.

Answer 1

A:

There's the .position() function too, however (though they're perpetually confusing to me) my understanding is backwards from what you've written: .offset() is relative to the document origin, while .position() is relative to the "offset parent".

I think it's the fact that the term "offset parent" contains the word "offset" that confuses me.

Pointy 2010-08-25 20:21:45

You have it right. `.position()` is relative to the parent and `.offset()` is relative to the document. But, since my divs are inside a relative position div, `.offset` is giving me the position relative to the parent, as is `.position()`.

smfoote 2010-08-25 20:29:37

Hmm ... that seems kind-of weird. As I said, it might help to see a (possibly simplified) HTML sample to show the wrong answer you're getting.

Pointy 2010-08-25 20:39:46

Answer 2

A:

I did a test with the html below. The value I get for offset is different than position. Is something else going on that changes where the parent div is positioned? If another element is getting added to the DOM after you check the position and offset values, then maybe you need to check position later. Maybe using inline style as opposed to using CSS classes makes a difference? (you will need to get json2.js from http://www.json.org/js.htm)

<html><head>
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="script/json2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var position = {};
        position.grandpa = { position: $("div.grandpa").position(), 
                             offset: $("div.grandpa").offset() };
        position.dad = { position: $("div.dad").position(), 
                         offset: $("div.dad").offset() };
        position.me = { position: $("div.me").position(), 
                        offset: $("div.me").offset() };
        alert(JSON.stringify(position));
    });
</script>

 <style type="text/css">
    div.grandpa {
        position: relative;
        border: 3px solid blue;
        padding: 10px;
        background-color: White;
    }
    div.dad {
        position: absolute;
        top: 4px;
        left: 4px;
        border: 2px solid green;
        padding: 10px;
    }
    div.me {
        border: 1px solid red;
        padding: 10px;
    }
 </style>
</head>

<body>
    <div class="grandpa">
        John
        <div class="dad">
            Joseph
            <div class="me">Justin</div>
        </div>
    </div>
</body>
</html>

Silkster 2010-08-25 21:05:00

Answer 3

A:

Have you looked at .offsetParent(), you can traverse up to the window and get the total offset.

See also http://www.sitepoint.com/forums/showthread.php?t=620402

Jerome 2010-08-25 22:56:33

I was hoping to find a simpler way to find the position in the window. I have decided instead to redesign the page so that I don't have to get the position. Thanks for the help, though.

smfoote 2010-08-27 21:35:11

ansaurus

tags:

views:

answers:

Get the absolute position of a div relative to the window.

related questions