I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency.
Based on the erratic display, it seems like the problem might be related to the Z-index, but I'm struggling to pinpoint the exact cause of the issue.
Here is the code snippet: 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;
}