试图掩盖页面：绝对位置和固定废墟格式

Question

我正在尝试创建一个屏蔽页面的加载图像（当调用时）。

我正在使用车把，html、css 和 javascript。

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

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

其中填充了一些 javascript，将内容放入上述每个容器、微调器和特殊容器中。（虚构的名字如有错字请见谅）

推入微调器div的内容如下：

<div id="mask">
    <div id="spinner">
        Hello world I am the spinner page
        <span class="icon icon-house margin-right-10" ></span>
    </div>
</div>

我有一个包含我的 css 的 .less 文件。看起来像这样：

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

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

当我用上面的代码呈现我的页面时，我得到第一个 div （微调器）在另外两个 div 之上，它们彼此重叠。如果我将 css 更改为：

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

#spinner {
}

我得到特殊容器（1，第一个）上方的微调器，它位于第二个特殊容器上方。这是我想要的特殊容器设计，但不是我想要的微调器设计。我想要页面中间的微调器，我希望它可以随页面调整大小（如果我不需要这个，我想我可以通过设置顶部、底部和其他尺寸参数来解决我的问题css).

没有定位：微调器 div2 div3

有定位 spinner/div2/div3 顶部的微调器以及 div2 和 div3 现在显着变小并且彼此重叠。

我看了这个：z-index not working with fixed positioning 其中指出我需要每个 div 都有一个位置。但是对那里的提问者有用的东西对我不起作用（一切最终都在彼此之上，而不是微调器在格式正确的 2 个其他 divs 之上）

只要微调器呈现在 div2 和 div3 之上，它就可以工作。问题是我似乎无法弄清楚为什么 div2 和 div3 停止一个接一个地渲染，而是它们的大小（大大）缩小并且一个接一个地重叠。

为什么位置会导致这个？我该怎么办？

如果我没有强制大小，为什么位置会改变它？我该怎么办？

Answer 1

解决方案：

关键是要从此页面中删除 z-index。相反，我将它插入到微调器 child 的 div 中。

所以在微调器里面我有 html 这样的：

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

我删除了以下内容css：

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

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

并用 css 替换为内部 children

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

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

效果很好。

试图掩盖页面：绝对位置和固定废墟格式

Trying to Mask a Page: Postion Absolute & fixed ruin formatting

html

javascript

css

handlebars.js