# Stacking Elements # Stacking Elements 堆叠的或者移动到其他元素前面的小部件（Widgets）当放置到现实世界的页面中时经常面临挑战。通常通过简单地改变堆叠元素的 `z-index` 或者父元素来避免页面上的冲突。但是，jQuery UI 需要一个不需要手动改变 `z-index` 值的通用的解决方案。这是通过 `ui-front` class 来完成的，通常还伴随着堆叠组件上的 `appendTo` 选项。 ## [link](#the-ui-front-class) The `ui-front` class `ui-front` class 是非常基础的。它只是在元素上设置了一个静态的 `z-index` 值。但是，class 的存在是用来表明堆叠元素要追加到哪里。这允许我们利用嵌套层内容，生成一个在大多数情况下都能使用的默认的 DOM 位置。 *注释：当使用 `ui-front` 时，您必须设置 `position` 为 `relative`、 `absolute` 或 `fixed`，以便应用 `z-index`。* ## [link](#the-stacking-technique) 堆叠技术（stacking technique） 追加堆叠元素到页面的任何小部件都必须使用 `ui-front` class，且在大多数情况下，应该有一个 `appendTo` 选项。堆叠元素应遵循下面的规则： - 如果一个值设置为 `appendTo` 选项，则追加堆叠元素到指定的元素。 - 如果 `appendTo` 选项被设置为 `null`（默认），则小部件应从相关的元素开始遍历 DOM。例如，当自动完成（autocomplete）菜单被追加到 DOM，遍历则从相关的 input 元素开始。 - 如果找到一个带有 `ui-front` class 的元素，则追加到该元素。 - 如果没有找到一个带有 `ui-front` class 的元素，则追加到主体（body）。 - 堆叠元素的 `position` 必须设置为 `relative`、`absolute` 或 `fixed`，以便应用来自 `ui-front` class 的 `z-index`。使用 [.position()](position) 将自动设置 `position`。