Z-index invalid problem with Apple phone

Today, when writing a H5 page, I found a question to record here.

Problem: If a CSS style adds z-index to an element:-1; is normal on Android, but if the Z-index value is negative in the iphone, the element will not be loaded.

When the Z-index is set to a positive number, the Apple phone is normal and the following code is attached:

<div class= "Twoperson" >
							
							
						</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/Parenting test cover _0008_fh3bnzouz9l2_ju2qkzlfyk3jdub.png);
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	Z-index:-1;
}

The Z-index style in the above. Divbottom is set to-1 when the Apple phone effect is this:

Here's a little picture gone,

If the value of Z-index is set to a positive number, it is possible, as shown in figure

Here to summarize, today found this problem, so record, I looked up some information, others should also find this problem.

Then Z-index set to negative when the Apple phone why not see it, it is possible because the body of the z-index is 0 times times the body of the elements blocked.