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

秒速五厘米 2022-06-10 05:15 677阅读 0赞

今天在写一个H5页面的时候，发现一个问题在这里记录一下。

问题：如果css样式中 对一个元素 添加z-index: -1; 时 在android手机中正常，但是在苹果手机中 如果z-index的值为负数时，该元素就不会加载出来了

将z-index 设置为正数时，苹果手机也就正常了，下面贴上代码：

.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时 苹果手机的效果是这样：

![Center][]

下面的一个小图片没了  ，

如果把z-index的值设置为 正数时 ，就可以了，如图

![Center 1][]

这里总结一下，今天发现了这个问题，故记录一下，我查了一些资料，别人应该也发现了这个问题。

然后z-index设置为负数时， 苹果手机为什么看不到呢，有可能是因为 body的z-index是0 倍body的元素挡住了。

[Center]: /images/20220610/fc336e0ce37d4d17a4bce7557f48bbe6.png
[Center 1]: /images/20220610/e34c063fee8a42638e49f9658ab89232.png