如何隱藏div后面的文本？

Question

所以我試圖在固定位置制作一個頂部菜單欄。

問題是雖然滾動時一切看起來都不錯，但滾動時所有圖像、div 和所有在 div 后面的內容，另一方面，文本仍然在菜單前面。

我已經確保文本在代碼中的 div 之前加載，但它像這樣放在前面： https : //i.gyazo.com/4ac5dfd1d316c47a80a6991fc286e0b4.gif

代碼很亂，因為我對這一切都很陌生，但我會嘗試展示代碼的重要部分。

HTML：

<div class="logotext">
<h1>Rustic Café</h1>  
</div>

<div class="topwood"></div>

CSS：

    .logotext
{
   color: rgb(255, 255, 255);
   position: absolute;
   top: 50%;
   left: 41%;
   width: 100vw;
   height: auto;
   z-index: 998;
   font-size: 83px;
   font-family: "Satisfy", cursive;
   text-shadow: 10px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.topwood
{
   width: 100%;
   height: 4.2vw;
   top: 0vw;
   left: 0vw;
   position: fixed;
   background-color: rgb(236, 236, 236);
   box-shadow: 0 0 3px;
}

Answer 1

問題是由於 CSS 中的“z-index”屬性造成的。 您的頂部欄菜單 z-index 應該大於文本。

例如：

.topBar {
    position: fixed;
    z-index: 999
}


.text {
    position: relative;
    z-index: 998;
}

Answer 2

為什么.logotext需要 998 的z-index ？

無論如何，您所需要的只是在標題中添加更高的z-index值。