获取div相对于窗口的绝对位置
[英]Get the absolute position of a div relative to the window
问题描述
这个问题与我要寻找的问题非常相似，但是我认为我的情况有足够不同，值得提出一个新问题。
我有几个div绝对位于父div的内部（ position: relative ）。 我想获得子div相对于窗口的位置。 jQuery offset()方法似乎不起作用，因为它为我提供了与父div的偏移量。 有没有办法获取绝对位置在相对位置div内的div的绝对位置？
范例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 个解决方案
解决方案1
3 已采纳 2010-08-25 20:21:45
也有.position()函数，但是（尽管它们使我永远困惑）我的理解与您所写的.offset() ： .offset()相对于文档原点，而.position()相对于文档原点“抵消父母”。
我认为事实是“补偿父母”一词包含“补偿”一词，这使我感到困惑。
解决方案2
2 2010-08-25 22:56:33
您是否已经看过.offsetParent() ，就可以遍历窗口并获取总偏移量。
解决方案3
0 2010-08-25 21:05:00
我用下面的html做了测试。 我获得的偏移值与位置不同。 还有其他事情会改变父div的位置吗？ 如果在检查位置和偏移值后将另一个元素添加到DOM，则可能需要稍后检查位置。 也许使用内联样式与使用CSS类有所不同？ （您需要从http://www.json.org/js.htm获取json2.js）
<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>
解决方案4
-3 2011-01-19 01:36:10
嗨，使用jQuery库的position（）函数。
创建一个名为Stage的Div和另一个名为Content的Div。 在Stage Div上，写入位置绝对，顶部和左侧。 在Div内容类型位置中，绝对值，顶部和左侧也是如此。
好？
CSS：相对位置在相对位置div中的绝对位置
[英]CSS: Relative position in absolute position in a relatively positioned div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.