html - Mobile Safari 中的 Z-Index 问题

Question

站点是:http://matthamil.com/Hamloo/

这是带有 H2 的部分，上面写着“我们的方法”。

我正在尝试添加一个灰色的 div，它将位于最后一个 .services-box div(“管理结果”框) 的后面，但我想要它位于 #our-approach div 之上。但是，我什至无法让 .light-grey-bg div 显示在 Mobile Safari 上。

CSS:

#our-approach {
    background-color: #464646;
}

.services-box {
    margin: 0 auto;
    width: 80%;
    float: center;
    z-index: 3;
    position: relative;
}

.inner-box {
    color: #262628;
    background-color: #262628;
    width: 80%;
    height: 600px;
    margin-left: auto; margin-right: auto;
    margin-top: 30px;
    margin-bottom: 100px;
    z-index: 3;
    position: relative;
}

.light-grey-bg {
    width: 100%;
    height: 300px;
    background-color: #DDDDDD;
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
    clear: both;
    position: relative;
    z-index: 1;
}

Answer 1

您可以使用 -webkit-transform: translateZ(1px);; 在 3D 空间中定位元素；这会将它们提升到所有其他元素之上(z 位置 0px)。

请注意，这是一个 100% 独立于 z-index CSS 属性的概念，后者定义了本地堆叠上下文中的堆叠顺序。