jQuery UI | position() 方法

简介

position() 方法是 jQuery UI 提供的一种相对定位元素的方法，可以将一个元素相对于其他元素进行定位，并对元素进行一些调整。

语法

$(selector).position({
  my: "left top", // 元素位置
  at: "left top", // 另一元素的位置
  of: $("selector"), // 相对于的元素
  collision: "fit" // 碰撞检测
});

参数

• my：要定位的元素的位置。这里定义的是目标元素在所需位置处的位置。它由两个值组成，中间用空格分隔，可以是以下任意组合：
  • 'center'
  • 'left', 'center', 'right'
  • 'top', 'center', 'bottom'
  • 'left top', 'left center', 'left bottom'
  • 'right top', 'right center', 'right bottom'
• at：要定位的另一元素的位置。这里定义的是“参考”元素在所需位置处的位置。与 my 的值格式相同，默认值：'center'.
• of：相对于哪个元素进行定位，可以是另一个元素或 window.
• collision：碰撞检测，意为元素不会覆盖处理区域的边缘。它可以设置以下值之一：
  • 'flip'
  • 'fit'
  • 'none'

示例

$( "#myElement" ).position({
  my: "center",
  at: "center",
  of: "#otherElement"
});

返回值

position() 方法没有返回值。

总结

position() 方法是一种灵活、强大的工具，可以帮助我们实现元素的相对定位和对齐。它可以确定元素对齐的位置，并确保它不会与其他元素重叠。同时，它还可以在元素与其他元素碰撞时进行处理。