堆叠元素

---

在实际页面中放置堆叠小组件或移动到其他元素前面的堆叠小组件通常会带来挑战。通常很容易更改堆叠元素的 z-index 或父元素，以避免页面上的任何冲突。但是，jQuery UI 需要一个通用的解决方案，而不需要手动使用 z-index 值。这是通过 ui-front 类实现的，通常堆叠小组件上还有配套的 appendTo 选项。

link ui-front 类

ui-front 类非常简单。它只是在元素上设置一个静态 z-index 值。但是，该类的存在用于指示元素是一个堆叠元素，它指示应附加其他堆叠元素的位置。这使我们能够利用嵌套堆叠上下文，从而得到适用于大多数用例的默认 DOM 位置。

注意：使用 ui-front 时，还必须将 position 设置为 relative、absolute 或 fixed，才能应用 z-index。

link 堆叠技术

任何将堆叠元素附加到页面的小组件都必须使用 ui-front 类，并且在许多情况下应该有一个 appendTo 选项。应将以下逻辑应用于堆叠元素

• 如果为 appendTo 选项提供了值，则将堆叠元素附加到指定元素。
• 如果 appendTo 选项设置为 null（默认值），则小部件应从关联元素向上遍历 DOM。例如，当自动完成菜单附加到 DOM 时，遍历从关联的输入元素开始。
  • 如果找到另一个堆叠元素，则附加到该元素。
  • 如果没有找到其他堆叠元素，则附加到正文。
• 堆叠元素还必须将 position 设置为 relative、absolute 或 fixed，以便应用 ui-front 类的 z-index。使用 .position() 将自动设置 position。

堆叠元素定义为具有 ui-front 类的元素，或创建新堆叠上下文的任何本机元素。目前，<dialog> 是唯一被视为堆叠元素的本机元素。