Mobile Safari 中的 Z-Index 问题

Question

这是带有 H2 的部分，上面写着 "Our Approach."

我正在尝试添加一个灰色 div，它将位于最后一个 .services-box div ("Manage Results" box) 的后面，但我希望它位于 #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 space 中定位元素；这会将它们提升到所有其他元素之上（z 位置 0px）。

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

Mobile Safari 中的 Z-Index 问题

Z-Index issue in Mobile Safari

html

css

mobile

safari

z-index