尝试点击其中一个缩略图：http://henrybuilt.com/questions/
在计算机上，它可以根据需要工作（文本覆盖显示在幻灯片组中的第一个图像的顶部，然后在单击下一个或上一个图像时消失）。在Safari或iPhone上的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;
}
完整的文档：
<?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>
答案 0 :(得分：1)
请更新以下CSS代码：
.prev, .next{z-index:999999}
.slide_view .title{z-index:999}
.slide_view .text{z-index:9999}