Javascript 试图屏蔽页面：绝对位置和固定格式

我正在尝试创建一个加载图像，在呼叫时屏蔽页面

我正在使用把手、html、css和javascript

我有一个.hbs页面，看起来像这样：

<div id="spinner"></div>
<div class="special-container"></div>
<div class="special-container"></div>

.special-container {
  max-width: 1170px;
  position:absolute; // I have also tried position:fixed;
}

#spinner {
  position: relative;
  z-index: 100;
}

<div id="mask">
     <div id="innerObj">
</div></div> 

当我用上面的代码呈现页面时，我得到了第一个div微调器，它位于其他两个div之上。如果我将css更改为：

.special-container {
  max-width: 1170px;
}

#spinner {
}

我得到了特殊容器1上方的微调器，第一个在第二个特殊容器上方。这是我想要的特殊容器的设计，但不是我想要的旋转器。我希望页面中间的旋转器，如果它不需要这个页面，我想它是可调整的，我想我可以通过设置CSS中的顶部、底部和其他尺寸参数来修复我的问题。 无定位： 纺纱机 第二组 第三组

定位 spinner/div2/div3，其中顶部的微调器以及div2和div3现在显著更小并且彼此重叠

我看了这个, 这说明我需要每个部门都有一个职位。但对提问者有用的东西对我来说并不适用所有的东西最终都在彼此之上，而不是旋转器在正确格式的另外两个div之上

只要微调器在div2和div3的顶部渲染，它就可以工作。问题是我似乎不明白为什么div2和div3不再一个接一个地渲染，而是缩小得非常大，并且彼此重叠

为什么位置会导致这种情况？我能怎么办

如果我不强制大小，为什么位置会改变它？对此我能做些什么？

解决方案：

关键是要从此页中删除z索引。相反，我把它插入了spinner之子的div中

在spinner中，我有如下html：

<div id="spinner"></div>
<div class="special-container"></div>
<div class="special-container"></div>

.special-container {
  max-width: 1170px;
  position:absolute; // I have also tried position:fixed;
}

#spinner {
  position: relative;
  z-index: 100;
}

<div id="mask">
     <div id="innerObj">
</div></div> 

并将其替换为内部子级的css

#mask {
  position: fixed;
  z-index: 1;
  background: rgba(192,192,192,0.3);

}
#innerObj {
  position: relative;
  z-index: 100;
}

这很有效