# 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`。
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget