使用z-index重叠带有图像的div

Question

CSS动画在图像后面不断播放.未加载图像时,它将显示,但加载后图像将与动画重叠.我正在使用z-index来实现这一点,但它无法正常工作.

图像应隐藏使用z-index属性加载动画.

注意:我无法使用任何javascript解决方案来隐藏加载动画并在图像加载后显示它.

CSS/HTML/Demo

.leftprev {
    overflow:auto;
    position:absolute;
    height:99%;
    width:85%;
}
.loadingslide {
    z-index: 50; /* Loading div's z-index */    
}
.spinner.big {
    display: block;
    height: 40px;
}
.spinner {
    bottom: 0;
    display: none;
    font-size: 10px;
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 60px;
}
.spinner.big > div {
    width: 6px;
}
.spinner > div {
    animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
    background-color: #333;
    display: inline-block;
    height: 100%;
    width: 6px;
}
a {
    color: #470a09;
    text-decoration: none;
}
.slideshow .slidebro .leftprev #slideshowpic {
    display: block;
    margin: 0 auto;
    width: auto;
    z-index: 100; /* image's z-index */    
}

<div class="leftprev">
    <div class="loadingslide"> <!-- Loading Animation div (should be running in background of the image) -->
        <div id="tracking" class="spinner big">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
        <a id="targetslide" target="_blank" title="Click to view fit to screen" href="">
          <img src="http://www.placehold.it/500" alt="" id="slideshowpic" />  <!-- The image (should mask the loading animation div) -->
        </a>
</div>    

Answer 1

您必须向要应用z-index的元素添加位置.

来自CSS技巧:

CSS中的z-index属性控制重叠元素的垂直堆叠顺序.就像在,哪一个看起来好像它在物理上更接近你.z-index仅影响位置值不是静态的元素(默认值).

http://css-tricks.com/almanac/properties/z/z-index/