在JQuery中怎样用.offset/.position为元素设置位置

请尽量清晰完善地描述问题，以便大家给予专业的回复。

慕粉2255152253 2017-05-20

源自：jQuery DOM操作 3-13 编程练习

116

收起

2回答

小丸子爱吃菜 2017-06-19 09:43:33

该方法返回的对象包含两个整型属性：top 和 left，以像素计算，你自己可以敲下代码试试。

收起回答

小丸子爱吃菜 2017-05-20 14:52:20

1、offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。语法是：$(selector).offset()，比如页面中有一个·div元素，给这个div元素涉资偏移

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
<title></title>
<style>
    div{width:200px;height:200px;border:1px solid red;}
</style>
</head>
<body>
    <div id="div"></div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        $("#div").offset({top:100,left:100})
    </script>
   </body>
</html>

2、position() 方法返回匹配元素相对于父元素的位置（偏移），也就是相对于被定位的祖辈元素的坐标，该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。

比如下面的例子：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
<title></title>
<style>
    div{width:200px;height:200px;border:1px solid red;position:relative;}
    p{width:100px;height:100px;border:1px solid red;}
</style>
</head>
<body>
    <div id="div">
        <p></p>
        <p id="p"></p>
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        var Value=$("#p").position();;
        console.log(Value.left+","+Value.top)
    </script>
</body>
</html>

第二个P距离被设置定位的父元素div左边为0，上边是有距离的。

与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。

自己可以多练习一下试试。

祝学习愉快！

收起回答