移動Safari忽略的z-index

試着點擊這裏縮略圖之一：http://henrybuilt.com/questions/移動Safari忽略的z-index

在它的工作原理根據需要（文本疊加顯示在設置，然後將載玻片第一圖像之上的計算機消失時下一個或上一個被點擊）。在Safari或Chrome中的iPad或iPhone上，文本疊加層會顯示一秒鐘，然後在加載後由背景圖像幻燈片div覆蓋，並且無法使我的疊加層（.slide_view .title）出現在背景div頂部。

具體CSS：

 .slide_view .title{ 
      display: none; 
      position: absolute; 
      top:0; 
      left:0; 
      background-color: white; 
      width: 100%; 
      height: 100%; 
      z-index: -3 
     } 
     #backstretch{ 
      z-index: -3; 
     }

完整的DOC：

<?php 

$slides = array(
    array("Why talk with us",  "whytalk",  6), 
    array("Who we are",   "who",   1), 
    array("Notable projects",  "notable",  0), 
    array("Products",    "products",  0), 
    array("Unique options",  "unique",  11), 
    array("Kitchens",    "kitchens",  0), 
    array("Whole House",   "whole",   0), 
    array("Furniture",   "furniture",  4), 
    array("Opencase",    "opencase",  0), 
    array("What is a system",  "system",  5), 
    array("HB vs Custom",   "vscustom",  0), 
    array("HB vs Euro system", "vseuro",  0), 
    array("Design Process",  "design",  0), 
    array("Making it",   "making",  0), 
    array("Installation",   "installation", 0), 
    array("Pricing",    "pricing",  0), 
    array("Materials",   "materials",  0), 
    array("High functions",  "highfunctions", 0), 
    array("Craft quality",  "craft",   0), 
    array("Press kit",   "press",   0), 
    array("Working remotely",  "working",  0), 
    array("Client site",   "client",  0) 
); 

?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body{ 
       margin: 0; 
       padding: 0; 
       color: #000; 
       font-size: 62.5%; 
      } 
      body, input, textarea, select{ 
       font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      } 
      .wrapper{ 
       max-width: 1000px; 
       margin: auto; 
       padding: 2%; 
      } 
      .header{ 
       font-size: 3em; 
       margin-bottom: 2%; 
       padding: 2% 0%; 
      } 
      .thumb_wrapper{ 
       float: left; 
       width: 17%; 
       margin-right: 3%; 
       margin-bottom: 2%; 
      } 
      .thumb_wrapper:hover{ 
       cursor: pointer; 
       opacity: 0.5; 
      } 
      .thumb_wrapper img{ 
       width: 100%; 
       margin-bottom: 1%; 
      } 
      .thumb_wrapper .caption{ 
       text-transform: uppercase; 
       opacity: 0.8; 
       font-size: 1em; 
       margin: 2% 2%; 
      } 
      .slide_view{ 
       display: none; 
      } 
      .slide_view .nav_bar{ 
       width: 100%; 
       height: 10%; 
       background-color: rgba(0, 0, 0, 1); 
       position: absolute; 
       bottom: 0; 
       left: 0; 
      } 
      .slide_view .title{ 
       display: none; 
       position: absolute; 
       top:0; 
       left:0; 
       background-color: white; 
       width: 100%; 
       height: 100%; 
       z-index: -3 
      } 
      .slide_view .text{ 
       position: absolute; 
       top:50%; 
       margin-top: -1em; 
       font-size: 4em; 
       color: black; 
       width: 100%; 
       text-align: center; 
       text-transform: uppercase; 
      } 
      #backstretch{ 
       z-index: -3; 
      } 
      .caption{ 
      } 
      .controls{ 
       float: right; 
       margin-right: 3%; 
       display: block; 
       height: 100%; 
       width: 20%; 
      } 
      .prev, .next { 
       height: 8%; 
       padding: 10px; 
       border-radius: 5px; 
       background: rgba(0,0,0,.5); 
       position: absolute; 
       top: 50%; 
       margin-top: -50px; 
       cursor: pointer; 
       z-index: 3; 
      } 
      .prev:hover, .next:hover, .back:hover { 
       opacity: 0.5; 
       cursor: pointer; 
      } 
      .next{ 
       right: 5%; 
      } 
      .prev{ 
       left: 5%; 
      } 
      .back{ 
       float: left; 
       display: block; 
       height: 100%; 
      } 
      .back img{ 
       height: 90%; 
       margin-top: 5%; 
       margin-left: 50%; 
       margin-right: 50%; 
       display: block; 
      } 
      .overlay{ 
       display: none; 
       position: absolute; 
       top:0; 
       left:0; 
       background-color: black; 
       width: 100%; 
       height: 100%; 
      } 
      .image_caption{ 
       text-transform: uppercase; 
       margin-left: 10%; 
       padding-top: 1%; 
       float: left; 
       font-size: 1em; 
       color: #fff; 
      } 
      .relative{ 
       width: 100%; 
       height: 100%; 
       position: relative; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script src="jquery.backstretch.min.js"></script> 
     <script> 
      var showing_title = false; 
      var showing_title_for_first_time = false; 

      var slides = [ 
      <?php 
      foreach($slides as $slide){ 
       echo " 
       ['".$slide[0]."', '".$slide[1]."', ".$slide[2]."],"; 
      } 
      ?> 

       ["", "", 0] 
      ]; 

      var current_group; 
      var current_index; 
      var transition_length = 500; //in ms 

      $(document).ready(function(){ 
       var image_width = $(".thumb_wrapper .image_wrapper").width(); 
       $(".thumb_wrapper .image_wrapper").height(image_width*.75); 

       $(".thumb_wrapper").click(function(){ 
        var t = this; 
        var group = $(t).attr("group"); 

        slideView(); 

        var prefix = slides[group][1]; 
        var index = 0; 

        current_group = group; 
        current_index = index; 
        setSlide(prefix, index); 

        showing_title = true; 
        showTitleForGroup(group); 

       }); 

       $(".next").click(function(){ 
        next(); 
       }); 

       $(".prev").click(function(){ 
        prev(); 
       }); 

       $(".exit").click(function(){ 
        thumbView(); 
       }); 
      }); 

      function slideView(){ 
       setTimeout(function(){ 
        $(".thumb_view").hide(); 
        $(".slide_view").show(); 
       }, transition_length); 

       showing_title_for_first_time = true; 
      } 

      function thumbView(){ 
       setTimeout(function(){ 
        $.backstretch("destroy"); 
        $(".slide_view").hide(); 
        $(".thumb_view").show(); 
       }, transition_length); 
       transition(); 
      } 

      function showTitleForGroup(group){ 
       showing_title = true; 
       transition(); 
       setTimeout(function(){ 
        $(".title").show(); 
        $(".title .text").html(slides[group][0]); 
       }, transition_length); 
      } 

      function hideTitle(){ 
       showing_title = false; 

       transition(); 
       setTimeout(function(){ 
        $(".slide_view .title").hide(); 
       }, transition_length); 
      } 

      function transition(){ 
       $(".overlay").fadeIn(transition_length, function(){ 
        $(".overlay").fadeOut(transition_length); 
       }); 
      } 

      function setSlide(prefix, index){ 
       transition(); 
       setTimeout(function(){ 
        $.backstretch("images/"+prefix+"_"+index+".jpg"); 
        if(showing_title){ 
         $("#backstretch").zIndex(-3); 
        } 
       }, transition_length); 
      } 

      function next(){ 
       if(showing_title){ 
        hideTitle(); 
       }else{ 
        var group_size = slides[current_group][2]; 
        var groups = slides.length; 

        var index = current_index + 1; 
        var group = current_group; 

        if(index >= group_size){ 

         index = 0; 
         group = parseInt(current_group) + 1; 

         if(slides[group][0] == ""){ 
          group = 0; 
         } 

         showTitleForGroup(group); 
        } 

        var prefix = slides[group][1]; 

        current_index = index; 
        current_group = group; 

        setSlide(prefix, index); 
       } 
      } 

      function prev(){ 
       if(showing_title && !showing_title_for_first_time){ 
        hideTitle(); 
       }else{ 

        var index = current_index - 1; 
        var group = current_group; 

        if(current_index == 0){ 
         group = current_group - 1; 

         if(group == -1){ 
          group = slides.length - 2; 
         } 

         index = slides[group][2] - 1; 

         if(!showing_title_for_first_time){ 
          showTitleForGroup(current_group); 
         } 
        } 

        if(showing_title_for_first_time){ 
         hideTitle(); 
         showing_title_for_first_time = false; 
        } 

        var prefix = slides[group][1]; 

        current_index = index; 
        current_group = group; 

        setSlide(prefix, index); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="thumb_view"> 
       <div class="header"> 
        henrybuilt 
       </div> 
       <div class="content"> 
        <?php 
        $i = 0; 
        foreach($slides as $slide){ 
        ?> 
        <div class="thumb_wrapper" group="<?php echo $i; ?>"> 
         <div class="image_wrapper"> 
          <img src="images/<?php echo $slide[1]; ?>_0.jpg" /> 
         </div> 
         <div class="caption"> 
          <?php echo $slide[0]; ?> 
         </div> 
        </div> 
        <?php 
         $i++; 
        } 
        ?> 
        <div style="clear:both"></div> 
       </div> 
       <div class="footer"> 

       </div> 
      </div> 
      <div class="slide_view"> 
       <div class="nav_bar"> 
        <div class="relative"> 
         <div class="back"> 
          <img class="exit" src="images/exit.png"/> 
         </div> 
         <div class="image_caption"> 

         </div> 
        </div> 
       </div> 
       <img class="next" src="images/next.png"/> 
       <img class="prev" src="images/prev.png"/> 
       <div class="title"> 
        <div class="text"> 
         some text 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="overlay"> 

     </div> 
     <div style="display:none"> 
     <?php 
     foreach($slides as $slide){ 
      for($i = 0; $i < $slide[2]; $i++){ 
       echo ' 
      <img src="images/'.$slide[1].'_'.$i.'.jpg"/>'; 
      } 
     } 
     ?> 
     </div> 
    </body> 
</html>

來源

2014-09-24 maxhud

請更新下面的CSS代碼：

.prev, .next{z-index:999999} 
.slide_view .title{z-index:999} 
.slide_view .text{z-index:9999}

來源

2014-09-24 07:34:58

感謝的人！任何想法爲什麼我的代碼不工作？ – maxhud 2014-09-24 23:21:32

移動Safari忽略的z-index

回答

相關問題