在彈出圖像上顯示上一個和下一個圖標

Question

我想在彈出圖像上顯示下一個和上一個圖標。不幸的是，圖標仍然留在彈出的圖像後面。我已經設置了Z-index，但它仍然保持彈出狀態。 HTML：

<div class="row-fluid"> 
    <div class="col-sm-12"> 
     <ul class="image-list"> 
      <li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> 
      <li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> 
     </ul> 
     <div class="navigation" id="nav"> 
      <span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span> 
      <span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span> 
     </div> 
    </div> 
</div> 

CSS

.pup 
    { 
     width: 100%; height: 100%; 
     background: #666; 
     opacity: 0.7; 
     position: fixed; 
     top: 0px; left: 0px; 
     z-index: 111; 
     display: none; 
    } 
    .viewer{ 
     background: #666; padding: 12px; 
     position: fixed; z-index: 222; 
     text-align: center; 
     display: none; 
    } 
    #nav{ 
     display: none; 
     background:red; 
     z-index: 333; 
     color: #FFF; 
    } 

javscript

function view(src) 
     { 
      var viewer = document.getElementById("viewer"); 
      viewer.innerHTML ='<img src="' + src + '" id="img"/>'; 
      var img = document.getElementById("img"); 
      var iw=0, ih=0; 
      var dw=0, dh=0; 
      img.onload=function(){ 
       document.getElementById("ov").style.display="block"; 
       viewer.style.display="block"; 
       document.getElementById("nav").style.display="block"; 
       iw = viewer.offsetWidth; 
       ih = viewer.offsetHeight; 
       dw = window.innerWidth; 
       dh = window.innerHeight; 
       viewer.style.top = parseInt(dh/2-ih/2) + "px"; 
       viewer.style.left = parseInt(dw/2-iw/2) + "px"; 
      }; 
     } 
     function hide2() 
     { 
      document.getElementById("viewer").style.display="none"; 
      document.getElementById("ov").style.display="none"; 
      document.getElementById("nav").style.display="none"; 
     } 

Answer 1

對於這種情況，不要試圖給position: fixed，而不是試着給position: absolute。這可以很容易地使用CSS完成。看看這個片斷：

.slider, .slider .slides, .slider li {list-style: none; margin: 0; padding: 0; position: relative; width: 400px; height: 200px;} 
 
.slider li {position: absolute; left: 0; top: 0;} 
 
.slider li:first-child {z-index: 1;} 
 

 
.slider .slider-controls a {position: absolute; text-decoration: none; font-size: 1.5em; color: #000; z-index: 10; top: 50%; left: 0; background-color: #000; color: #fff; width: 35px; line-height: 32px; text-align: center; height: 35px; border-radius: 100%; top: 100px; margin-top: -16px; right: 10px; left: auto;} 
 
.slider .slider-controls a:first-child {left: 10px; right: auto;}

<div class="slider"> 
 
    <ul class="slides"> 
 
    <li><img src="http://lorempixel.com/400/200/animals/6" alt="Slide" /></li> 
 
    <li><img src="http://lorempixel.com/400/200/animals/2" alt="Slide" /></li> 
 
    <li><img src="http://lorempixel.com/400/200/animals/3" alt="Slide" /></li> 
 
    <li><img src="http://lorempixel.com/400/200/animals/4" alt="Slide" /></li> 
 
    <li><img src="http://lorempixel.com/400/200/animals/5" alt="Slide" /></li> 
 
    </ul> 
 
    <div class="slider-controls"> 
 
    <a href="#">&laquo;</a> 
 
    <a href="#">&raquo;</a> 
 
    </div> 
 
</div>

的完整代碼用JavaScript：

$(function() { 
 
    $(".slides li").hide(); 
 
    $(".slides li:first-child").show(); 
 
    $(".slider-controls a:nth-child(1)").click(function() { 
 
    curSlide = $(".slides li:visible"); 
 
    $(".slides li").hide(); 
 
    if (curSlide.prev().length) 
 
     curSlide.prev().show(); 
 
    else 
 
     curSlide.parent().find("li:last-child").show(); 
 
    return false; 
 
    }); 
 
    $(".slider-controls a:nth-child(2)").click(function() { 
 
    curSlide = $(".slides li:visible"); 
 
    $(".slides li").hide(); 
 
    if (curSlide.next().length) 
 
     curSlide.next().show(); 
 
    else 
 
     curSlide.parent().find("li:first-child").show(); 
 
    return false; 
 
    }); 
 
});

.slider, .slider .slides, .slider li {list-style: none; margin: 0; padding: 0; position: relative; width: 400px; height: 200px;} 
 
.slider li {position: absolute; left: 0; top: 0;} 
 
.slider li:first-child {z-index: 1;} 
 

 
.slider .slider-controls a {position: absolute; text-decoration: none; font-size: 1.5em; color: #000; z-index: 10; top: 50%; left: 0; background-color: #000; color: #fff; width: 35px; line-height: 32px; text-align: center; height: 35px; border-radius: 100%; top: 100px; margin-top: -16px; right: 10px; left: auto;} 
 
.slider .slider-controls a:first-child {left: 10px; right: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    <ul class="slides"> 
 
    <li id="slide-1"><img src="http://lorempixel.com/400/200/animals/6" alt="Slide" /></li> 
 
    <li id="slide-2"><img src="http://lorempixel.com/400/200/animals/2" alt="Slide" /></li> 
 
    <li id="slide-3"><img src="http://lorempixel.com/400/200/animals/3" alt="Slide" /></li> 
 
    <li id="slide-4"><img src="http://lorempixel.com/400/200/animals/4" alt="Slide" /></li> 
 
    <li id="slide-5"><img src="http://lorempixel.com/400/200/animals/5" alt="Slide" /></li> 
 
    </ul> 
 
    <div class="slider-controls"> 
 
    <a href="#">&lsaquo;</a> 
 
    <a href="#">&rsaquo;</a> 
 
    </div> 
 
</div>

Answer 2

嘗試設置在#nav一個position:relative，z-index的需要位置上。

#nav { 
    position: relative; 
}