html - jQuery slideshow overlapping CSS ribbon -

i'm designing website has css ribbon hanging top left corner. when place image under ribbon, ribbon overlaps image, i'm going for.

however, when implement j-query slide show technique following happens.

my question is, how can overlapping appearance desire while being able use slide show? below i've posted code following.

html , javascript slideshow

    <center>  <div id="slideshow">     <div>       <img class="slide_img" src="images/limo_banner.png">     </div>     <div>       <img class="slide_img" src="images/24_banner.png">     </div>     <div>      <img class="slide_img" src="images/limo_banner.png">     </div> </div>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> 

$(document).ready(function(){  $("#slideshow > div:gt(0)").hide();  setinterval(function() {    $('#slideshow > div:first')     .fadeout(1000)     .next()     .fadein(1000)     .end()     .appendto('#slideshow'); },  3000);  });  </script>  </center> 

css slideshow

#slideshow {       position: relative; }  #slideshow > div {      position: absolute;  }  .slide_img  {     max-width: 100%;     height: auto;     width: auto\9; /* ie8 */     -webkit-box-shadow: 0px 0px 25px rgba(50, 50, 50, 1); -moz-box-shadow: 0px 0px 25px rgba(50, 50, 50, 1); box-shadow: 0px 0px 25px rgba(50, 50, 50, 1); } 

css ribbon

.ribbon {     background: #a83736;     border-left: 1px dashed #aaa;     border-right: 1px dashed #aaa;     border-radius: 5px 5px 0 0;     box-shadow: 5px 0 0 #a83736, -5px 0 0 #a83736;     height: 120px;     margin: 0 5px;     position: relative;     width: 90px;     -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));     margin-left: 50px; } .ribbon:after, .ribbon:before {     border-top: 15px solid #a83736;     content: '';     height: 0;     position: absolute;     top: 100%;     width: 0; } .ribbon:after {     border-left: 50px solid transparent;     right: -6px; } .ribbon:before {     border-right: 50px solid transparent;     left: -6px; } 

set ribbon have higher z-index slideshow containing div , show.

.ribbon { z-index 10; }  .containing-div-for-slideshow { z-index: 0; }