CSS 背景色不粘

Question

我正在嘗試制作一個從頁面中間開始的導航欄，在滾動時會粘在屏幕頂部。 我已成功使用導航欄項目，但.navbar背景（灰色）與頁面的 rest 一起滾動，並被導航欄下方容器中的背景圖像替換。 感謝您對代碼的任何幫助。

CSS：

.navbar_container {
    position: sticky;
    top: 0;
    display: flex;
    margin: 0px;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: gray; 
}

.navbar_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.image_container_bg {
    display: flex;
    margin: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
}

HTML（目標替換為占位符）：

<div class="navbar_container">
    <a class="navbar_item" href="link">
        Home
    </a>
    <a class="navbar_item" href="link">
        About
    </a>
    <a class="navbar_item" href="link">
        Help
    </a>
</div>

<figure class="image_container_bg">
    <img src="filename">
</figure>

Answer 1

將z-index應用於導航欄（ z-index: 1在這種情況下就足夠了）

 html, body { margin: 0; }.navbar_container { position: sticky; top: 0; display: flex; margin: 0px; padding-top: 1px; padding-bottom: 1px; background-color: gray; z-index: 1; }.navbar_item { display: flex; align-items: center; justify-content: center; padding: 5px; }.image_container_bg { display: flex; margin: 0px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; opacity: 0.5; }

 <div class="navbar_container"> <a class="navbar_item" href="link"> Home </a> <a class="navbar_item" href="link"> About </a> <a class="navbar_item" href="link"> Help </a> </div> <figure class="image_container_bg"> <img src="https://placehold.it/800x1200/fba"> </figure>

Answer 2

嘗試修復 position，如下所示：

 .navbar_container{ top:0; position: sticky; display:flex; justify-content:center; background-color:red; width:100%; }.navbar_item{ padding-left:3rem; }.wrapper{ height:1000px }

 <div class="wrapper"> <div class="navbar_container"> <a class="navbar_item" href="link"> Home </a> <a class="navbar_item" href="link"> About </a> <a class="navbar_item" href="link"> Help </a> </div> </div>