獲取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.