Поместите элемент над слайд-шоу

Question

Недавно я столкнулся с какой-то проблемой, я хотел бы разместить png-изображение над моим слайд-шоу, я пробовал все возможные решения, которые я мог найти/подумал, но он остается позади или наверху, но не прозрачный.

Учитывая, насколько случайным является отображение, я предполагаю, что это имеет какое-то отношение к Z-индексу, но я не могу понять, откуда эта проблема.

вот код: 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; 
}