jquery offset() 和 position()答案

【问题标题】：jquery offset() and position()jquery offset() 和 position()
【发布时间】：2011-06-29 08:42:26
【问题描述】：

我需要获取元素相对于其父元素的位置。 position() 应该会这样做，但看起来没有。

<!DOCTYPE html>
<html>
<head>
  <style>

  body{padding: 0px; margin: 0px;}
  div { margin-left: 200px; padding: 30px; border: 1px solid red;}
  p { margin: 0px; padding: 0px; border: 1px solid black }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

    <script>
        $(document).ready(function() {

            var p = $("p.paragraf");
            var position = p.offset();
            $("p.zadnji").text( "left: " + position.left + ", top: " + position.top );

        });
    </script>  

</head>
<body>

<div class="container">
  <p class="paragraf">Hello</p>
</div>
<p class="zadnji"></p>

</body>
</html>

结果：

左：231，上：31

如果p.paragraf 在#container 内部，那么#container 应该是p.paragraf 的父级。如果#container的padding设置为30px，p.paragraf的左上角不应该都是30px吗？

我尝试了offset()，但结果与position() 相同

【问题讨论】：

标签： jquery position parent offset

【解决方案1】：

阿罗哈，

添加位置：相对；到你的容器风格

jsfiddle 示例

【讨论】：

是的，我错过了添加“相对”