html - Safari z-index 错误

Question

我有两个容器，第一个容器必须覆盖第二个容器的一部分。我用 z-indexes 做了这个，它在桌面和设备工具栏上工作得很好。但是，当我从移动平台访问该网站时，容器就会自行混合。我已经尝试过 webkit、translate3d，但仍然没有结果。也许我错过了什么。

HTML

<div class="photoContainer">
<div class="photo"> </div>
</div>

<div class="aboutMe">
    <div class="textContainer">
<br><br>
        <h2 style="text-align: center; font-weight: 700;">About Me</h2>

</div>
    </div>

<div class="projectsContainer">
    <div style="margin-top: 125px;width: 100%;text-align: center;" 
class="titleCont">
        <h2 style="font-weight: 700;">Projects</h2>
    </div>

</div>

CSS

.aboutMe {
overflow: visible;
box-shadow: 5px 5px 7px 3px rgba(195, 192, 192, 0.92);
border-radius: 8px;
margin-top: 65px;
height: 40em;
border: 2px solid #737373;
width: 60%;
position: absolute;
left: 20%;
background-color: rgba(255, 255, 255);
}

.textContainer {
width: 100%;
overflow: auto;
height: 100%;
}

.content-wrapper {
position: relative;
height: 100vh;
margin-top: 100px;
}

.photo {
text-align: center;
width: 100px;
height: 100px;
background-image: url(//url here);
border-radius: 100%;
box-shadow: 3px 3px 7px 3px rgba(195, 192, 192, 0.92);
background-size: contain;
}

.photoContainer {
position: absolute;
z-index: 9999;
justify-content: center;
display: flex;
width: 100%;
}

.projectsContainer {
z-index: -10 !important;
position: relative;
top: 40em;    
width: 100%;
height: 550px;
border: 2px solid #737373;
box-shadow: 4px 3px 7px 5px rgba(195, 192, 192, 0.92);
}

aboutMe 容器应该位于 projectsContainer 容器之上。只要它在桌面上运行，为什么它不能在 ios 上运行？

提前谢谢你:)

Answer 1

那是因为你使用 rgba 只是为了颜色，但你忘记了 alpha channel 。

在 rgba(255, 255, 255, 1) 或 #fff 或只是白色 上设置背景颜色。