寫輪播圖的時(shí)候遇到如下問(wèn)題：

 <style>
.swiper-container {
  width: 850px;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 100px;
  position: relative;
  z-index: -1;
}
.swiper-container .swiper-prev {
  width: 58px;
  height: 58px;
  position: absolute;
  left: -90px;
  top: 40%;
  background: url(../images/swiper-prev.png);
}
.swiper-container ul {
  overflow: hidden;
  width: 1000%;
}
.swiper-container ul li {
  width: 265px;
  float: left;
  height: 190px;
  margin: 0 10px;
}

</style>
<div class="swiper-container">
     <ul>
           <li><img src="images/swiper1.png" alt=""></li>
           <li><img src="images/swiper2.png" alt=""></li>
           <li><img src="images/swiper3.png" alt=""></li>
           <li><img src="images/swiper1.png" alt=""></li>
           <li><img src="images/swiper2.png" alt=""></li>
           <li><img src="images/swiper3.png" alt=""></li>
           <li><img src="images/swiper1.png" alt=""></li> 
    </ul>
    <div class="swiper-prev"></div>
    <div class="swiper-next"></div>
</div>

效果圖：

image.png

此時(shí)swiper-prev這個(gè)盒子并沒(méi)有顯示出來(lái)，給其設(shè)置z-index也沒(méi)有效果！

解決方案：

• 避開(kāi)overflow對(duì)盒子隱藏的影響，在最外層加一個(gè)盒子，讓swiper-prev相對(duì)于最外層的盒子定位

代碼如下

 <style>
.slider-box {
  width: 850px;
  height: 190px;
  position: relative;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 100px;
}
.slider-box .swiper-prev {
  width: 58px;
  height: 58px;
  position: absolute;
  left: -90px;
  top: 40%;
  background: url(../images/swiper-prev.png);
  z-index: 999;
}
.slider-box .swiper-container {
  width: 850px;
  height: 190px;
  overflow: hidden;
  z-index: -1;
}
..slider-box .swiper-container ul {
  overflow: hidden;
  width: 1000%;
}
.slider-box .swiper-container ul li {
  width: 265px;
  float: left;
  height: 190px;
  margin: 0 10px;
}
</style>

<div class="slider-box">
    <div class="swiper-container">
        <ul>
            <li><img src="images/swiper1.png" alt=""></li>
            <li><img src="images/swiper2.png" alt=""></li>
            <li><img src="images/swiper3.png" alt=""></li>
            <li><img src="images/swiper1.png" alt=""></li>
            <li><img src="images/swiper2.png" alt=""></li>
            <li><img src="images/swiper3.png" alt=""></li>
            <li><img src="images/swiper1.png" alt=""></li>
        </ul>
    </div>
    <div class="swiper-prev"></div>
    <div class="swiper-next"></div>
</div>

效果圖：

image.png