如何制作父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中心。在旋转动画显示的同时，还要在父div上添加叠加层。我怎样才能通过CSS实现它？

下面的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>