将元素放在幻灯片放映上方

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

使用position：absolute;和z指数;在你想要的图像上。

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