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

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

ui-front class

ui-front class 是非?；A(chǔ)的。它只是在元素上設(shè)置了一個(gè)靜態(tài)的 z-index 值。但是，class 的存在是用來表明堆疊元素要追加到哪里。這允許我們利用嵌套層內(nèi)容，生成一個(gè)在大多數(shù)情況下都能使用的默認(rèn)的 DOM 位置。

注釋：當(dāng)使用 ui-front 時(shí)，您必須設(shè)置 position 為 relative、 absolute 或 fixed，以便應(yīng)用 z-index。

堆疊技術(shù)（stacking technique）

追加堆疊元素到頁面的任何小部件都必須使用 ui-front class，且在大多數(shù)情況下，應(yīng)該有一個(gè) appendTo 選項(xiàng)。堆疊元素應(yīng)遵循下面的規(guī)則：

  • 如果一個(gè)值設(shè)置為 appendTo 選項(xiàng)，則追加堆疊元素到指定的元素。
  • 如果 appendTo 選項(xiàng)被設(shè)置為 null（默認(rèn)），則小部件應(yīng)從相關(guān)的元素開始遍歷 DOM。例如，當(dāng)自動(dòng)完成（autocomplete）菜單被追加到 DOM，遍歷則從相關(guān)的 input 元素開始。
    • 如果找到一個(gè)帶有 ui-front class 的元素，則追加到該元素。
    • 如果沒有找到一個(gè)帶有 ui-front class 的元素，則追加到主體（body）。
  • 堆疊元素的 position 必須設(shè)置為 relative、absolute 或 fixed，以便應(yīng)用來自 ui-front class 的 z-index。使用 .position() 將自動(dòng)設(shè)置 position。