今天在写一个H5页面的时候，发现一个问题在这里记录一下。
问题：如果css样式中 对一个元素 添加z-index: -1; 时 在android手机中正常，但是在苹果手机中 如果z-index的值为负数时，该元素就不会加载出来了
将z-index 设置为正数时，苹果手机也就正常了，下面贴上代码：
<div class="twoPerson">
<img class="girl" src="images/cover/育儿测试封面_0000_背景-副本.png" />
<img class="boy" src="images/cover/育儿测试封面_0001_背景-副本.png" />
</div>
<div class="divBottom">
</div>
.twoPerson{
position: absolute;
bottom: 0px;
height: 40%;
width: 100%;
z-index: 33;
padding-bottom: 0px;
}
.twoPerson .girl{
position: absolute;
bottom: 0px;
left: 0px;
width: 55%;
height: 95%;
margin-bottom: 0px;
}
.twoPerson .boy{
position: absolute;
bottom: 0px;
right: 0px;
width: 44%;
height: 50%;
margin-bottom: 0px;
}
.divBottom{
width: 100%;
height: 7.5%;
position: absolute;
bottom: 0px;
background-image: url(../images/cover/育儿测试封面_0008_Fh3BNZOuz9L2_Ju2qKzLfYK3jDUb.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
z-index: -1;
}
上述的.divBottom 中的z-index 样式设置为 -1时 苹果手机的效果是这样：
下面的一个小图片没了 ，
如果把z-index的值设置为 正数时 ，就可以了，如图
这里总结一下，今天发现了这个问题，故记录一下，我查了一些资料，别人应该也发现了这个问题。
然后z-index设置为负数时， 苹果手机为什么看不到呢，有可能是因为 body的z-index是0 倍body的元素挡住了。