MDN 建議在Stacking Context下使用版本號，其中子元素被賦予版本號（例如，如果子元素的 z 索引為 6 并且包含在 z 索引為 4 的父元素中，則其版本號將為 4.6）。它使用此方法可以輕松解釋 z-index 5 的父/子堆棧之外的 div 如何出現在 z-index 6 的子元素上方（因為它的版本號為 4.6）。但是，我在下面構建了一個示例，該示例無法使用此方法。黃色 div (z-index 1) 是紅色 div (z-index 0) 的子級，我輸入了 z-index 為 0 的藍色 div。版本號方法會建議版本號為黃色的 div 0.1 應該出現在藍色 div 上方，但這當然不會發生。我是否誤解了 MDN 或者我創建了一個反例？
1 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
我認為版本控制方法試圖MDN解釋的是：
子級永遠不能超過其父級的 z-index。
這意味著子級在其父級之外的 z-index 等于父級的 z-index。
您正在yellow div與進行比較blue div。這是不正確的。
你應該red div與進行比較blue div。
這是因為red是 的父級yellow，并且在 之外red，黃色的 z-index 不再重要。
如果要yellow在上面顯示 div，則必須增加 的 z 索引，red使其超過 的 z 索引blue。
在MDN，我上面寫的總結如下：
需要注意的是，DIV #4、DIV #5 和 DIV #6 是 DIV #3 的子級，因此這些元素的堆疊在 DIV#3 中完全解決。一旦 DIV #3 內的堆疊和呈現完成，整個 DIV #3 元素將被傳遞以相對于其同級 DIV 堆疊在根元素中。
計算沿 Z 軸堆疊元素的渲染順序的一種簡單方法是將其視為某種“版本號”，其中子元素是其父元素主版本號下方的次版本號。
- 1 回答
- 0 關注
- 90 瀏覽
添加回答
舉報
0/150
提交
取消