jQuery UI Position（定位）实例
Position 是 jQuery UI 中非常实用的工具方法，用于将一个元素精确地定位到另一个元素（或页面、窗口）的相对位置。它支持碰撞检测（collision）、偏移（offset）、自动调整等功能，常用于实现工具提示（Tooltip）、下拉菜单、上下文菜单、对话框居中、气泡提示、拖拽吸附等场景。
官方文档：https://jqueryui.com/position/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础定位（相对目标元素）
将一个元素定位到另一个元素的指定位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Position 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#target { width: 150px; height: 100px; background: #3498db; margin: 100px auto; position: relative; }
#positioned { width: 100px; height: 80px; background: #e74c3c; color: white; padding: 10px; position: absolute; }
</style>
</head>
<body>
<button id="pos1">右下角</button>
<button id="pos2">左上角</button>
<button id="pos3">居中</button>
<div id="target">目标元素</div>
<div id="positioned">被定位元素</div>
<script>
$(function() {
$("#pos1").click(function() {
$("#positioned").position({
my: "left top", // 被定位元素的参考点
at: "right bottom", // 目标元素的参考点
of: "#target" // 目标元素
});
});
$("#pos2").click(function() {
$("#positioned").position({
my: "right bottom",
at: "left top",
of: "#target"
});
});
$("#pos3").click(function() {
$("#positioned").position({
my: "center center",
at: "center center",
of: "#target"
});
});
});
</script>
</body>
</html>2. 常用选项（offset、collision）
offset: 偏移量（如 “20 30” 表示右移20px、下移30px）。collision: "flip"：超出视口时自动翻转位置。
<button id="tooltipBtn">悬停查看提示</button>
<div id="tooltip" style="display:none; background:#333; color:white; padding:10px; border-radius:6px; position:absolute;">
这是一个工具提示框，支持自动翻转！
</div>
<script>
$("#tooltipBtn").hover(function() {
$("#tooltip").show().position({
my: "left+10 center",
at: "right center",
of: this,
collision: "flipfit" // 先翻转，再适应视口
});
}, function() {
$("#tooltip").hide();
});
</script>3. 定位到鼠标或窗口
常用于自定义上下文菜单或气泡。
<div id="contextMenu" style="display:none; background:#fff; border:1px solid #ccc; padding:10px; box-shadow:0 4px 10px rgba(0,0,0,0.2); position:absolute;">
<ul>
<li>复制</li>
<li>粘贴</li>
<li>删除</li>
</ul>
</div>
<script>
$(document).on("contextmenu", function(e) { // 右键
$("#contextMenu").show().position({
my: "left top",
at: "left top",
of: e, // 定位到鼠标事件
offset: "10 10"
});
e.preventDefault(); // 阻止默认右键菜单
});
$(document).click(function() {
$("#contextMenu").hide();
});
</script>4. 窗口居中 + 动态调整
<button id="centerWindow">窗口居中</button>
<script>
$("#centerWindow").click(function() {
$("#positioned").position({
my: "center center",
at: "center center",
of: window, // 定位到窗口
collision: "none" // 不处理碰撞
});
});
// 窗口大小变化时重新定位
$(window).resize(function() {
$("#positioned").position({
my: "center center",
at: "center center",
of: window
});
});
</script>常用 my/at 值组合：
left top→right bottom：箭头指向右下center top→center bottom：下方居中提示right center→left center：左侧提示
小技巧：
using回调：可在定位完成后执行动画，如using: function(pos) { $(this).animate(pos, 300); }- 与 Tooltip 结合：Tooltip 内部就是用 position 实现的。
- 性能：position 计算很快，适合实时拖拽反馈。
Position 是实现高级交互布局的核心工具，常用于自定义下拉菜单、气泡提示、浮动工具栏。如果你需要 完整自定义 Tooltip、下拉菜单、或 拖拽时吸附定位 的示例，请告诉我！
