用z-index和位置解釋這種模態行爲？

Question

我實際上爲自己解決了這個問題，但想知道是否有人可以解釋爲什麼我的修復工程。我使用MoovWeb SDK和sass在移動網站上設計了一個彈出窗口模式。模態包含一個掩碼div，它位於一個容器div的正上方，以及模式div本身，它被深埋在DOM中。

面具造型：

#modalMask{ 
    opacity: .8; 
    position: absolute; 
    display:none; 
    height:100%; 
    width: 100%; 
    z-index:9990; 
} 

模造型：

.mw-popup-modal { 
    top: 80px !important; 
    left: 0 !important; 
    position:fixed; 
    z-index:9999; 
    display:none; 
} 

這導致了口罩坐在模態的頂部和內模態是未可點擊的按鈕 - 他們的自來水面積實際上位於電話屏幕上按鈕出現在屏幕下方約3cm處。但是，在網站的桌面版本上，這種樣式看起來很好。

當我將模態的定位從「固定」更改爲「絕對」時，解決了這個問題，但我想了解原因。固定位置和絕對位置元素各自工作在自己的z-index棧上嗎？

Answer 1

Official W3 documentation狀態

固定定位是絕對定位的子類別。唯一的區別是，對於固定位置的框，包含塊由視口建立。對於連續媒體，滾動文檔時固定框不會移動。在這方面，它們與固定背景圖像相似。

絕對和固定定位不適用於他們自己的z-index堆棧上下文。