Get the absolute position of a div relative to the window
Question
This question is quite similar to what I want I'm looking for, but my situation is different enough, I think, to merit a new question.
I have several divs positioned absolutely inside of a parent div ( position: relative ). I want to get the position of the children divs relative to the window. The jquery offset() method doesn't seem to work, because it gives me the offset from the parent div. Is there a way to get the absolute position of a div that has absolute position inside of a relative position div?
Sample html:
<div id="parent" style="position:relative;">
<div id="child1" style="position:absolute; top:10px; left 8px;">Child 1</div>
<div id="child2" style="position:absolute; top:20px; left 8px;">Child 2</div>
</div>
4 answers
solution1
3 ACCPTED 2010-08-25 20:21:45
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.
solution2
2 2010-08-25 22:56:33
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
solution3
0 2010-08-25 21:05:00
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"></script>
<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>
solution4
-3 2011-01-19 01:36:10
Hi Use the position () function of jQuery library.
Create a Div called Stage and another called Content. On Stage Div write position absolute, top and left. In Div Content type position absolute, top and left too.
Ok?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.