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

#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 {
    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; }