堆叠的或者移动到其他元素前面的小部件(Widgets)当放置到现实世界的页面中时经常面临挑战。通常通过简单地改变堆叠元素的 z-index 或者父元素来避免页面上的冲突。但是,jQuery UI 需要一个不需要手动改变 z-index 值的通用的解决方案。这是通过 ui-front class 来完成的,通常还伴随着堆叠组件上的 appendTo 选项。

ui-front class

ui-front class 是非常基础的。它只是在元素上设置了一个静态的 z-index 值。但是,class 的存在是用来表明堆叠元素要追加到哪里。这允许我们利用嵌套层内容,生成一个在大多数情况下都能使用的默认的 DOM 位置。

注释:当使用 ui-front 时,您必须设置 positionrelativeabsolutefixed,以便应用 z-index

堆叠技术(stacking technique)

追加堆叠元素到页面的任何小部件都必须使用 ui-front class,且在大多数情况下,应该有一个 appendTo 选项。堆叠元素应遵循下面的规则:

  • 如果一个值设置为 appendTo 选项,则追加堆叠元素到指定的元素。
  • 如果 appendTo 选项被设置为 null(默认),则小部件应从相关的元素开始遍历 DOM。例如,当自动完成(autocomplete)菜单被追加到 DOM,遍历则从相关的 input 元素开始。
    • 如果找到一个带有 ui-front class 的元素,则追加到该元素。
    • 如果没有找到一个带有 ui-front class 的元素,则追加到主体(body)。
  • 堆叠元素的 position 必须设置为 relativeabsolutefixed,以便应用来自 ui-front class 的 z-index。使用 .position() 将自动设置 position