jQuery UI API – 堆疊元素（Stacking Elements）

堆疊的或者移動到其他元素前面的小部件（Widgets）當放置到現實世界的頁面中時經常面臨挑戰。 通常通過簡單地改變堆疊元素的z-index或者父元素來避免頁面上的衝突。 但是，jQuery UI需要一個不需要手動改變z-index值的通用的解決方案。 這是通過ui-front class來完成的，通常還伴隨著堆疊組件上的appendTo選項。

ui-front class

ui-front class是非常基礎的。 它只是在元素上設置了一個靜態的z-index值。 但是，class 的存在是用來表明堆疊元素要追加到哪裡。 這允許我們利用嵌套層內容，生成一個在大多數情況下都能使用的默認的DOM 位置。

註釋：當使用ui-front時，您必須設置position為relative 、 absolute或fixed ，以便應用z-index 。

堆疊技術（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 。