我如何在向下滚动时修复我的图像它出现在导航栏顶部而文本不是

Question

This is the image 这是我用来在向下滚动时更改背景颜色的 java 脚本。但是这里当我向下滚动时背景颜色正在改变但是当向下滚动时还有另一个图像出现在导航栏前面的问题。

     window.onscroll = function() {scrollFunction()};
     function scrollFunction() {
     if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
     document.getElementById("navbar").style.background = "black" ;

     // document.getElementsByClassName("img").style.z-index = "-1" ;
    

     }
     else{
     document.getElementById("navbar").style.background = "transparent";
     }

     }

这里我希望当我向下滚动和背景颜色发生变化时，图像位于导航栏的背面。这是我用过的CSS

    #navbar{
    align-items: center;
    display: flex;
    top: 0px;
    position: sticky;
    background: transparent;
    }

    #service-container{ 
     display: grid;
    padding: 30px;
    width: 96%;
    height: 100%;
     background-image: linear-gradient(to bottom right,rgb(255, 255, 255),rgb(226, 162, 
    194),rgb(196, 113, 154),rgb(248, 138, 193));
     z-index: -1;
    }
    #service-container .h-primary2{ 
     margin: 15px 43px;
    padding: 50px;
    font-family: 'Libre Baskerville', serif;
    text-align: center;
    font-weight:900;
    }
    #services{
        font-family: 'Libre Baskerville', serif;
    }
    .columns img{
     width: 50%;
     height: 50%;
    }
     div .from-right{
     float: right; 
     text-align: center;
     grid-column: 3/4;
     transform: translateX(50%);
     }

     div .from-left{
     float: left;
     text-align: center;
     grid-column: 2/3;
     transform: translateX(-50%);
   
     }

这里只有图像出现在导航栏前面，但文本内容在导航栏后面，这很好。
这是一个大问题，但请帮帮我，我已经尝试了一些没有用的东西。这与主页部分的问题相同，我有 SIGN IN 和 SIGN UP 按钮，它们位于导航栏的前面

**因为我仍在学习 java脚本，实际上并不知道要进行哪些更改。希望我已经尝试清楚地解释了这个问题**

Answer 1

固定导航栏下方或导航栏本身的图像位置

Answer 2

您可以设置导航栏的z-index。

W3Schools Article

例如：

#navbar {
    z-index: 999;
}

导航栏现在显示在 z-index 低于 999 的所有内容之上。

我如何在向下滚动时修复我的图像它出现在导航栏顶部而文本不是

How can i fix my images while scrolling down it comes on top of navbar while the texts are not

javascript

css

image

button

navbar