jQuery UI | position() 方法

position() 方法是 jQuery UI 库中的一个函数，它提供了一种简单且灵活的方式来控制页面元素的位置。该方法使用 CSS 定位（如相对，绝对或固定定位）来定位元素。该方法还可以在元素和他的参照物之间确定距离和方向。此外，该方法还可以计算元素与浏览器窗口之间的位置关系，并自动地调整元素的位置，以使元素能够完全显示在浏览器视图中。

语法

$(selector).position({
  my: "position",
  at: "position",
  of: "selector",
  collision: "collision"
});

• my：表示目标元素的对齐方式。这个参数是一个字符串，它的值可以是预定义的字符串，也可以是具体的像素指定方式。例如，"top left" 表示元素的左上角对齐，"center center" 表示元素的中心点对齐。
• at：表示参考元素的对齐方式。这个参数的值的格式同样是字符串，它可以是预定义的字符串，也可以是具体的像素值。例如，"bottom right" 表示元素和参考元素的右下角对齐，"center center" 表示元素和参考元素的中心点对齐。
• of：表示参考元素。这个参数是一个字符串，它是对目标元素定位的参照物。
• collision：表示元素在定位时可能会发生的碰撞。这个参数也是一个字符串，它的值可以是 "fit"，"flip"，"none" 来指定。

参数详解

1. 对齐方式

在 my 和 at 参数中可以使用的预定义字符串有：

• center
• left
• right
• top
• bottom

2. 具体的像素值

在 my 和 at 参数中可以使用具体的像素值。如 my: "center-10 top+5" 表示目标元素的水平居中位置减去 10 个像素且竖直方向 +5 个像素，这个值也可以是数字，如 my: [left, top] 表示目标元素与左上角对齐。

3. 参考元素

参考元素是定位的参照物，可以是页面中的任何元素。例如，of: "#box" 表示将要操作的元素相对于 id 为 box 的元素进行定位，默认值是 window，表示相对于浏览器窗口进行定位。

4. 碰撞检测

在 collision 参数中可以指定元素在定位时可能会发生的碰撞。预定义字符串有 fit，flip，none。

• fit 参数值将检查元素是否溢出父容器，并尝试自动调整元素的位置以完全显示在父容器中。
• flip 参数将自动地调整目标元素的方向，以避免与参考元素和视图边缘产生冲突。
• none 参数表示不进行碰撞检测，直接按照设定的位置信息去定位元素。

返回值

该方法返回目标元素以便进行链式操作。

示例代码

// 使用指定对齐方式对目标元素进行定位，并防止碰撞
$("#elementA").position({
  my: "center",
  at: "center",
  of: "#elementB",
  collision: "fit"
});

总结

该方法可以非常方便地定位页面元素，让页面更加灵活与美观。同时，掌握这个方法可以让我们更好地应对页面布局上的问题。