javascript - 试图屏蔽页面 : Postion Absolute & fixed ruin formatting

Question

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

我正在使用 handlebars、html、css 和 javascript。

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

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

其中填充了一些 javascript，这些 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 之上，这两个 div 彼此重叠。如果我将 css 更改为:

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

#spinner {
}

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

没有定位:微调器分区2分区3

有定位spinner/div2/div3 其中顶部的 spinner 和 div2 和 div3 现在显着变小并且彼此重叠。

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

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

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

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

Answer 1

解决方法:

关键是要从此页面中删除 z-index。相反，我将它插入到微调器子项的 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;
}

并为内部 child 用 css 替换它

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

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

这很好用。