在幻燈片上方放置一個元素

Question

我最近遇到了一些問題，我想在幻燈片上放置一張png圖片，我嘗試了所有可能的解決方案，但是它仍然保留在後面或頂部，但不是透明。

考慮顯示是多麼隨意，我猜測它與Z-index有關，但我似乎無法理解問題來自哪裏。

這裏是代碼：http://jsfiddle.net/6fSAt/6/

<div class="container"> 
    <img class"cache" src="http://imageshack.com/a/img822/4694/1gqc.png"/>  

    <div class="cachecontainer"> 
     <div id="Fader" class="fader"> 
      <img class="slide" src="http://www.barrelny.com/wp-content/uploads/about-office-slide-pingpong2-800x500.jpg"/> 
      <img class="slide" src="http://www.barrelny.com/wp-content/uploads/about-office-slide-bookcase-800x500.jpg"/> 
      <img class="slide" src="http://www.barrelny.com/wp-content/uploads/about-office-slide-bikerack-800x500.jpg"/> 
     </div> 
    </div> 
</div> 

body { 
width: 100%; 
height: 100%;  
} 
.cache { 
position:absolute; 
width:504px; 
height:781px; 
margin:auto;  
z-index:998; 
} 

.container { 
position:relative; 
overflow:hidden; 
width:504px; 
height:781px; 
margin:auto; 
background:#FF00FF; 
} 
.cachecontainer { 
position:absolute; 
} 

.fader{ 
padding-top: 60%; 
} 

.fader .slide{ 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
z-index: 1; 
opacity: 0; 
} 

.fader img.slide{ 
height: auto; 
} 

Answer 1

使用的位置是：絕對的;和z-索引;在你想要的圖像上。

div.container img { 
    position: absolute; 
    z-index: 100; 
}