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 one的顶部。为什么它不能在ios上运行，只要它可以在台式机上运行？

预先感谢您：）

Answer 1

那是因为您仅将rgba用作颜色，但是却忘记了alpha通道。

在 rgba（255、255、255、1）或 #fff 或仅白色上设置背景颜色。

Safari z-index错误

1 个答案: