用z-index和position解釋這種模態行為？

Question

我實際上是為自己解決了這個問題，但是想知道是否有人能解釋為什么我的修復工作正常。 我使用MoovWeb SDK和sass在移動網站上設置了一個彈出模式。 模態由一個掩碼div組成，它直接位於一個容器div中，而modal 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

官方W3文件說明

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

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