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

回答

相關問題