3

我实际上为自己解决了这个问题，但想知道是否有人可以解释我的修复工作的原因。我正在使用 MoovWeb SDK 和 sass 在移动网站上设计弹出模式。modal 包含一个 mask 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;
}

这导致蒙版位于模态框顶部，并且模态框内的按钮无法点击 - 它们的点击区域实际上位于手机屏幕上按钮出现的下方约 3 厘米处。但是，在该站点的桌面版本中，这种样式看起来不错。

当我将模态的位置从“固定”更改为“绝对”时，这解决了问题，但我想了解原因。固定和绝对定位的元素每个都在自己的 z-index 堆栈上工作吗？

4

1 回答 1

0

官方 W3 文档状态

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

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

于 2013-07-31T08:15:24.003 回答