移动浏览器忽略Z-index

Question

Try clicking one of the thumbnails here: http://henrybuilt.com/questions/ 尝试单击此处的缩略图之一： http : //henrybuilt.com/questions/

On a computer it works as desired (the text overlay is displayed on top of the first image in the slide set and then goes away when next or previous is clicked). 在计算机上，它可以按预期工作（文本叠加层显示在幻灯片组中的第一个图像的顶部，然后单击下一个或上一个时消失。） On iPad or iPhone in both safari and chrome, the text overlay appears for a second and then gets covered by my background image slide div once it loads and I cannot make my overlay (.slide_view .title) appear on top of the background div. 在同时使用Safari和Chrome浏览器的iPad或iPhone上，文本叠加层会显示一秒钟，然后在加载后会被我的背景图片幻灯片div覆盖，而我的叠加层（.slide_view .title）无法显示在背景div的顶部。

The specific css: 具体的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;
        }

The full 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>

Answer 1

Please update the below CSS code: 请更新以下CSS代码：

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

移动浏览器忽略Z-index

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-24 07:34:58

移动浏览器忽略Z-index

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-24 07:34:58

解决方案1
1 已采纳 2014-09-24 07:34:58