當我在網站上滾動時，影像和導航欄混合在一起。影像穿過導航欄，看起來導航欄的背景就是影像。
我把導航欄的位置固定和 z-index 1 和影像位置相對的 div 和 z-index 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;
}
uj5u.com熱心網友回復：
如果您不希望它透明，您可以簡單地添加 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>uj5u.com熱心網友回復：
嘗試將一個大數字寫入屬性 z-index 到導航欄，如 99
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534735.html
標籤：网页格式CSS
上一篇：使div精確高度為文本
下一篇：如何修復CSS樣式