首先，确保你已经包含了 jQuery 和 jQuery UI 的库。你可以在头部添加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Example</title>
<!-- 引入 jQuery 和 jQuery UI 的库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 创建两个 div 作为定位的容器 -->
<div id="container1" style="width: 100px; height: 100px; background-color: red;"></div>
<div id="container2" style="width: 100px; height: 100px; background-color: blue;"></div>
<button id="positionButton">定位</button>
<script>
// 使用 jQuery UI 的定位
$(function() {
// 在按钮点击时运行定位
$("#positionButton").on("click", function() {
// 使用定位
$("#container2").position({
my: "left top", // 定位元素的左上角
at: "right+10 top+10", // 相对于目标元素的右侧和顶部偏移10像素
of: "#container1", // 相对于 container1 元素定位
collision: "fit" // 遇到边界时调整位置，确保元素完全可见
});
});
});
</script>
</body>
</html>
在这个例子中，我们创建了两个 div 作为定位的容器（id 分别为 "container1" 和 "container2"），并设置了它们的初始样式。然后，创建了一个按钮（id 为 "positionButton"）。点击按钮时，通过 $("#container2").position({...}); 方法，将 container2 元素相对于 container1 进行定位。在这个例子中，我们将 container2 的左上角定位在 container1 的右上角，同时在水平和垂直方向上偏移了10像素，遇到边界时会自动调整位置以确保元素完全可见。
你可以根据实际需求设置不同的定位参数，实现元素相对于其他元素或视口的动态定位。
转载请注明出处：http://www.zyzy.cn/article/detail/13081/jQuery UI