Question

This question与我想要的非常相似，但我认为我的情况不同，值得提出一个新问题。

我有几个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>

Answer 1

也有.position()功能，但是（虽然它们永远让我感到困惑）我的理解与你写的相反：.offset()相对于文档来源，而{.position() 1}}相对于“偏移父”。

我认为“偏移父母”一词包含让我感到困惑的“偏移”一词。

Answer 2

你看过.offsetParent()，你可以到达窗口并获得总偏移量。

另见http://www.sitepoint.com/forums/showthread.php?t=620402

Answer 3

我使用下面的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>

Answer 4

您好使用jQuery库的position（）函数。

创建一个名为Stage的Div，另一个名为Content。 On Stage Div写入绝对位置，顶部和左侧。在Div内容类型位置绝对，顶部和左侧。

好吗？

获取相对于窗口的div的绝对位置

4 个答案: