HTML 中多個可移動視窗互相覆蓋的處理方法

雖說是視窗,但其實是個元件,不過稱視窗好像比較直觀些。
總之先看已經用 javascript 完成可移動的多個視窗功能,在沒有做任何處理的情況下,利用滑鼠去移動分別標有數字的方塊,會發現數字高的永遠在上層:

我想到的解決方法有兩種:

  1. 改變 DOM 的順序
  2. 改變 z-index

改變 z-index


缺點:z-index 可能會超過其他元件的 z-index,因此最好讓移動視窗的 z-index 固定在一個區間內循環。(z-index 值的區間為一個 int)

改變 DOM 的順序


缺點:若內容有像卷軸一樣無法用 CSS 控制的部分,在改變 DOM 的順序後將不會保留原先狀態,如下範例的數字 1 方塊。


解決方法:先把所有額外的狀態記起來,移動過順序後再將這些狀態指定回去。

最後我選擇了改變 z-index 的方法,因為我的移動視窗內可能會有多個卷軸,若要一一紀錄狀態實在麻煩,而且實測兩個方法的重繪效率上,z-index 也是略勝一籌。