CSS 加载器和覆盖定位：z-index 不起作用答案

【问题标题】：CSS Loader and Overlay Positioning: z-index Not WorkingCSS 加载器和覆盖定位：z-index 不起作用
【发布时间】：2016-12-09 21:58:36
【问题描述】：

我正在尝试使用 CSS 实现预加载，但我在 CSS 加载器相对于背景覆盖的定位方面遇到了问题。我希望覆盖以设置的不透明度覆盖 100% 的身体，并且加载程序坐在覆盖前面而不应用不透明度值。我实际上得到的是覆盖层和加载器都以降低的不透明度显示。我尝试设置 z-index 但这似乎对装载机的位置没有任何影响。任何人都知道问题可能是什么？

谢谢..

HTML 使用 Bootstrap 框架。

<div class="container-fluid">
<div id=overlay>
    <div class="row">
        <div class="col-md-12" id="spinner">

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                      <div class="rect1"></div>
                      <div class="rect2"></div>
                      <div class="rect3"></div>
                      <div class="rect4"></div>
                      <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>

        </div>
    </div>
    </div>
</div>

CSS - #spinner 设置加载器的位置。 #overlay 设置 100% 屏幕覆盖，降低不透明度和 z-index: -1;.

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

#overlay {
    opacity:0.1; 
    height: 100%;
    width: 100%;
    position:fixed;
    z-index: -1;
    left:0;
    top:0;  
}

Spinner CSS：构建加载器的 CSS。

.spinner2 {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner2 > div {
  background-color: #004a88;
  height: 100%;
  width: 6px;
  display: inline-block;


  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner2 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

【问题讨论】：

您要对#overlay 的哪些部分应用不透明度？（背景？文字？）
中毒...严重...？
@haxxxton 我希望将叠加层应用于身体。我希望加载器处于活动状态时背景模糊。
如果“模糊”是指您想要半透明的背景颜色，请查看在背景颜色规则中添加 alpha 参数，例如：background-color:rgba(0, 0, 0, 0.5);

标签： html css twitter-bootstrap-3

【解决方案1】：

这里的问题似乎是微调器从 #overlay 继承了不透明度 - 是否有任何理由需要微调器是后代？

我已将您的 HTML 更改为：

<div class="container-fluid">

    <div id=overlay>
    </div>

    <div class="row">
        <div class="col-md-12" id="spinner">
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </div>

</div>

这似乎解决了它 - jsfiddle here。

【讨论】：