介绍
jQuery UI 是一个基于 jQuery 构建的 UI 库，提供了很多插件和组件。jquery.ui.position 插件可以用于定位一个元素相对于另一个元素的位置。该插件是一个单独的 npm 包，可以通过 npm 安装和使用。
安装
使用 npm 安装：
npm install jquery-ui-position --save
使用
在你的 JavaScript 代码中引入它，并使用它的 position 函数定位元素：
-- -------------------- ---- -------
------ -------- ---- --------------------- -- -------
--- -------- - ------------------------------ -- -----------
------------ -
-------------------------
--- ----- -----
--- ----- --------
--- -----------
---
---参数说明
position 函数接受一个对象作为参数，该对象包含以下属性：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| my | String | "center" | 定位元素相对于目标元素的位置。格式为 "水平方向 垂直方向"，如 "left top"，“center center"，"right bottom" 等。可以使用 "left"， "center"， "right"， "top"， "center"， "bottom" 六个方向，还可以带上 "±" 的偏移量，如 "left+10 top-20"。 |
| at | String | "center" | 目标元素相对于定位元素的位置。格式同 my。 |
| of | Selector, Element, jQuery object, Event 或 String | 无 | 定位的目标元素。可以是一个选择器，DOM 元素，jQuery对象，事件，或字符串。如果是字符串，则使用 jQuery 的选择器来查找元素。 |
示例
下面的代码展示了如何使用 position 插件来定位元素。点击按钮时，弹出框将定位在按钮下面。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -- -------- ------------
----- ---------------- -------------------------------------------------------------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
-------
------
------- -------------- ------------
---- ----------- ------------- ------------- -------------
--------
------------ -
--------------------- ---------- -
---------------------
--------- -----
--------- -
--- ----- -----
--- ----- --------
--- ----
-
---
---
---
---------
-------
-------总结
使用 jquery.ui.position 插件可以方便地定位元素的位置，避免了手动计算位置的麻烦。需要注意的是，my 和 at 参数不是相对于父元素进行定位，而是相对于目标元素进行定位的。此外，使用 npm 安装和引入该插件可以更好地管理依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77891