jQuery幻灯片重叠CSS功能区

Question

我正在设计一个左上角悬挂着CSS功能区的网站。当我在色带下放置一个图像时，色带与图像重叠，这就是我想要的外观。

但是，当我实现J-Query幻灯片放映技术时，会发生以下情况。

我的问题是，如何在能够使用幻灯片放映时获得我想要的重叠外观？下面我发布了以下代码。

幻灯片的HTML和JAVASCRIPT

    <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 for 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 FOR 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;
}

Answer 1

将功能区设置为比包含div的幻灯片显示更高的z-index，它将显示。

.ribbon { z-index 10; }

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

Answer 2

尝试将您的功能区z-index设置为高：9999。我使用了很多旋转木马和幻灯片，在其元素上设置了z-index。