Question

我试图创建一个屏蔽页面的加载图像（进行调用时）。

我使用了把手，html，css和javascript。

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

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

其中填充了一些javascript，它将内容放入上述每个容器，微调器和特殊容器中。（如果有拼写错误，请原谅我的名字）

推入spinner 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个其他div之上）

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

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

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

Answer 1

解决方案：

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

所以在spinner中我有这样的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

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

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

这很有效。

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

1 个答案: