jQuery UI API – .position()
优质
小牛编辑
124浏览
2023-12-01
所属类别
方法重载（Method Overrides） | 方法（Methods） | 实用工具（Utilities）
用法
描述：相对另一个元素定位一个元素。
返回：jQuery
版本新增：1.8
.position( options )| 参数 | 类型 | 描述 |
|---|---|---|
| options | Object |
|
jQuery UI .position() 方法允许您相对窗体（window）、文档、另一个元素或指针（cursor）/鼠标（mouse）来定位一个元素，无需考虑相对父元素的偏移（offset）。
注释：jQuery UI 不支持定位隐藏元素。
这是一个独立的 jQuery 插件，且对其他 jQuery UI 组件没有依赖关系。
该插件扩展自 jQuery 内置的 .position() 方法。如果 jQuery UI 未加载，调用 .position() 方法不会直接失败，因为该方法在 jQuery 中存在。但是不会发生预期的行为。
实例
一个简单的 jQuery UI 定位（Position）实例。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.position() 实例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: green;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="targetElement">
<div id="position1"></div>
<div id="position2"></div>
<div id="position3"></div>
<div id="position4"></div>
</div>
<script>
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right center",
at: "right bottom",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
</script>
</body>
</html>