用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

Official W3 documentation州

  

固定定位是绝对定位的子类别。唯一的区别是，对于固定定位的框，包含块由视口建立。对于连续介质，滚动文档时固定框不会移动。在这方面，它们类似于固定的背景图像。

绝对和固定定位不适用于他们自己的z-index堆栈上下文。