如何用Windows XP图标主题为Linux桌面注入经典魅力：完整指南
2026/5/13 10:32:49
jQuery UI Position（定位）实例
Position是 jQuery UI 中非常实用的工具方法，用于将一个元素精确地定位到另一个元素（或页面、窗口）的相对位置。它支持碰撞检测（collision）、偏移（offset）、自动调整等功能，常用于实现工具提示（Tooltip）、下拉菜单、上下文菜单、对话框居中、气泡提示、拖拽吸附等场景。
官方文档：https://jqueryui.com/position/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础定位（相对目标元素）
将一个元素定位到另一个元素的指定位置。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Position 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//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><buttonid="pos1">右下角</button><buttonid="pos2">左上角</button><buttonid="pos3">居中</button><divid="target">目标元素</div><divid="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"：超出视口时自动翻转位置。
<buttonid="tooltipBtn">悬停查看提示</button><divid="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.定位到鼠标或窗口
常用于自定义上下文菜单或气泡。
<divid="contextMenu"style="display:none;background:#fff;border:1px solid #ccc;padding:10px;box-shadow:0 4px 10pxrgba(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.窗口居中 + 动态调整
<buttonid="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、下拉菜单、或拖拽时吸附定位的示例，请告诉我！