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通道。

在rgba（255，255，255，1）或#fff上設置background-color或僅設置white 。