jQuery位置方法
jQuery 提供了几种用于获取和设置元素位置的方法：
position()- 获取相对于父元素的位置。offset()- 获取相对于文档的位置。offsetParent()- 获取最近的定位父元素。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 位置示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="position: relative;">
<div id="box" style="width: 100px; height: 100px; background: red; position: absolute; top: 20px; left: 20px;">
</div>
</div>
<script>
$(document).ready(function() {
var position = $('#box').position();
console.log('相对于父元素的位置:', position);
var offset = $('#box').offset();
console.log('相对于文档的位置:', offset);
var offsetParent = $('#box').offsetParent();
console.log('最近的定位父元素:', offsetParent);
});
</script>
</body>
</html>在这个例子中，#box 元素的位置被获取并在控制台输出。position() 返回相对于直接父元素的上下左右偏移量；offset() 返回相对于文档的位置；offsetParent() 返回最近的定位（非 static）父元素。
评论已关闭