CSSローダーとオーバーレイの位置付け：z-indexが機能しない

Question

CSSを使用してプリロードを実装しようとしていますが、バックグラウンドオーバーレイに対するCSSローダーの配置に問題があります。私は、オーバーレイが設定された不透明度でボディの100％を覆い、ローダーが不透明度の値を適用せずにオーバーレイの前に座るようにしたいと思います。私が実際に得ているのは、オーバーレイとローダーの両方が、不透明度を下げて表示されているということです。私はz-indexを設定しようとしましたが、これはローダーの位置に何の違いもないようです。誰でも問題が何であるか考えている？

ありがとう。

HTMLはブートストラップフレームワークを使用しています。

<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ローダーの位置を設定します。 ＃オーバーレイは、不透明度が低く100％の画面オーバーレイを設定し、Z-インデックスは-1です。

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

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

スピナー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); 
    } 
} 

Answer 1

ここでの問題は、スピナーが#overlayから不透明度を継承していることのように見えますか？ - here jsfiddleそれを修正するようだ

<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> 

：

は、私はあなたにHTMLを変更しました。