# 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`。