Get the absolute position of a div relative to the window
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:abso开发者_开发百科lute; top:20px; left 8px;">Child 2</div>
</div>
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.
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
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>
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?
加载中,请稍侯......
精彩评论