使用z-index与图像重叠的div

CSS动画在图像后面不断播放。当图像未加载时，它将显示，但加载时图像将与动画重叠。我正在使用z-index来实现这一点，但它不起作用。使用z-index与图像重叠的div

图像应该隐藏具有z-index属性的加载动画。

注意：我不能使用任何javascript解决方案来隐藏加载动画并在图像加载后显示它。

CSS/HTML /演示

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

来源

2014-10-04 Sohan Patel

'如果元素具有诸如'absolute'或'fixed'位置z-index'时才使用。否则，它将被忽略，并根据DOM层次结构中的位置定位元素。 – jfriend00 2014-10-04 18:53:12

你必须位置添加到您要应用的z-index的元素。

从CSS-招数：

CSS中的z索引属性控制重叠元素的垂直堆叠顺序。就像在哪一个，看起来好像在物理上更接近你。 z-index仅影响具有非静态值（缺省值）值的元素。

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

来源

2014-10-04 18:41:53 emmanuel

为了定位加载动画正确：

放置容器
内部装载的div设置容器作为position: relative从而装载DIV被定位在与它的关系

要隐藏图像时加载的加载动画：

加载DIV给出z-index: 1
的图像被赋予position: relative，以便它可以有一个Z-index属性
图片给出z-index: 2并将重叠

在这个例子中，图像是容器宽度的一半，你可以看到它是如何与加载div重叠的。

CSS/HTML /演示

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.content { 
 
    height: 500px; 
 
    width: 500px; 
 
    background: #e91e63; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
.content img { 
 
    z-index: 2; 
 
    position: relative; 
 
    width: 250px; 
 
    height: 500px; 
 
} 
 
.loading { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 1em; 
 
    padding: 20px; 
 
    background: #FF0; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    z-index: 1; 
 
}

<div class="content"> 
 
    <div class="loading">I am loading</div> 
 
    <img src="http://www.placehold.it/250X500" /> 
 
</div>

来源

2014-10-04 18:56:56 misterManSam

使用z-index与图像重叠的div

回答

相关问题