親divのajax回転アニメーションセンターの作成方法？

Question

私は以下のhtmlのスケルトンをウェブページに持っています。

<div class="grand-parent"> 
    <div class="header">Heading</div> 
    <div class="parent-div"> 
     <div class="child-div-1"> 
     </div> 
     <div class="child-div-2"> 
     </div> 
     <div class="child-div-3"> 
     </div> 
     <div class="ajax-loader-container"> 
      <div class="ajax-loader"></div> 
     </div> 
     <div class="clear"/> 
    </div> 
</div> 

私はparent-divのスピニングアニメーションGIFセンターを作りたいです。また、回転アニメーションが表示されている間に、parent-divの上にオーバーレイを追加します。どのように私はCSSでそれを達成することができますか？

私は試しましたが、期待どおりに動作していません。オーバーレイは表示されませんでした。

.ajax-loader-container { 
    top: 0; 
    position: relative; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 99999999999999999999; 
    background: #f8f8f8; 
    opacity: .8; 
} 

.ajax-loader { 
    background: url(spinner.gif); 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 2em; 
    height: 2em; 
    background-size: contain; 
    display: block; 
    margin: auto; 
} 

Answer 1

ローダーを何らかの形で表示/非表示にすると仮定すると、以下のように正しい位置を取得する方法があります。でも、.ajax-loader-containerがあなたのコンテンツの上にあることに気をつけてください。

.parent-div{ 
 
    position: relative; 
 
} 
 

 
.ajax-loader-container { 
 
    top: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 99999999999999999999; 
 
    background: #f8f8f8; 
 
    opacity: .8; 
 
} 
 

 
.ajax-loader { 
 
    background: #f00; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 2em; 
 
    height: 2em; 
 
    background-size: contain; 
 
    display: block; 
 
    margin: auto; 
 
}

<div class="grand-parent"> 
 
    <div class="header">Heading</div> 
 
    <div class="parent-div"> 
 
     <div class="child-div-1 child-div"> 
 
     </div> 
 
     <div class="child-div-2 child-div"> 
 
     </div> 
 
     <div class="child-div-3 child-div"> 
 
     </div> 
 
     <div class="ajax-loader-container"> 
 
      <div class="ajax-loader"></div> 
 
     </div> 
 
     <div class="clear"/> 
 
    </div> 
 
</div>