为什么我的图像和导航栏混在一起

Question

当我在网站上滚动时，图像和导航栏混合在一起。图像通过导航栏显示并且看起来导航栏的背景就是图像。

我把导航条的位置固定，z索引1和图像位置的div相对，z索引0

<div class="header-top">
<a href="#home" class="meny-link"><span class="br">BR</span><span class="arch"> Architects</span></a>
<div class="meny">
<a href="#projects" class="meny-link">Projects</a>
<a href="about" class="meny-link">About</a>
<a href="contact" class="meny-link">Contact</a>
</div>
</div>
<div id="home">
<div class="image">
<img src="skyscraper.jpg" alt="">
</div>
</div>
</html>

.header-top{
box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 6px 0px;
z-index: 1;
}
.meny{
float: right;
word-spacing: 26px;
padding: 0px 25px 0px 0px;
}
.meny-link{
color: black;
text-decoration: none;
letter-spacing: 3px;
}
.br{
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#home{
position: relative;
top: 23px;
z-index: 0;
}
.image img{
width: 100%;
height: 675px;
}

Answer 1

如果不希望background: white;透明，可以简单地将其添加到.header-top。

这里有一个例子：

.header-top{
box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 6px 0px;
z-index: 1;
background: white;
}
.meny{
float: right;
word-spacing: 26px;
padding: 0px 25px 0px 0px;
}
.meny-link{
color: black;
text-decoration: none;
letter-spacing: 3px;
}
.br{
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#home{
position: relative;
top: 23px;
z-index: 0;
}
.image img{
width: 100%;
height: 675px;
}

<div class="header-top">
<a href="#home" class="meny-link"><span class="br">BR</span><span class="arch"> Architects</span></a>
<div class="meny">
<a href="#projects" class="meny-link">Projects</a>
<a href="about" class="meny-link">About</a>
<a href="contact" class="meny-link">Contact</a>
</div>
</div>
<div id="home">
<div class="image">
<img src="https://www.tommasocimarelli.com/wp-content/uploads/2020/01/skyscraper-manhattan.jpg" alt="">
</div>
</div>

Answer 2

尝试在属性z-index中写入一个大数字，以类似99