Question

为什么在这种情况下position方法不会返回[left: 100, top: 10]：

<!DOCTYPE HTML>
<html>
<head>
<style>
#parent1 {
    width: 300px;
    height: 200px;
    border: solid 9px pink;
}

#child1 {
    position: relative;
    left: 100px;
    top: 10px;
    width: 100px;
    height: 100px;
    border: solid 5px green;
}
</style>
<script src="http://jquery-local/jquery.all.js"></script>
<script type="text/javascript">
(function ($) {
    $(document).ready(function () {
        console.log($('#child1').position());
    });
})(jQuery); 
</script>
</head>
<body>

<div id="parent1">
    <div id="child1"></div>
</div>

</body>
</html>

是通过css方法获得排名的唯一方法吗？

Answer 1

您的jquery源位置错误。

尝试将jquery src更改为 http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

或最新版本 http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Answer 2

适合我 - 在this JSFiddle，我得到了

 left: 119
 top: 19

占10px顶部值加上周围元素的9px边界。

position()可能不是您想要的，但它会检索位置 relative to the offset parent. 在这种情况下，它没有任何区别，因为没有偏移父级，但如果您想要文档中的位置，请改用.offset()。

Answer 3

对我来说，它返回：[117,27]。

首先，因为孩子的位置是相对于父母的，所以孩子的坐标只相对于父母的坐标。这意味着父母的任何定位（例如默认的身体边距）都会添加到孩子的定位中。此外，还添加了另一个9 px的父级边框。如果将主体的边距设置为0，则子项的位置为[109,19]：）

为什么position方法不返回预期值？

3 个答案: