苹果手机的z-index 无效的问题

今天在写一个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的元素挡住了。