Question

我在标题的页面顶部有这个HEROTEXTBOX，它包含文本和图像。

 .topbannerbox {
    position: absolute;
    width: 1000px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
}

这是我的Header CSS：

   header {
    background-image: url(imgs/covertoplight3.jpg);
    background-color: #fff;
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;    
}

绝对值使此停留在顶部..如果将其更改为“固定”，它将向下滚动，但页面正文中的所有内容都位于顶部。我如何使其向下滚动隐藏在标题结束的顶部？

HTML标头：

     <header>

        <!-- Load font awesome icons -->


<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fab fa-facebook"></i></a> 
  <a href="#" class="linkedin"><i class="fab fa-github-alt"></i></a> 
  <a href="#" class="youtube"><i class="fab fa-youtube-square"></i></a> 
<a href="#" class="twitter"><i class="fab fa-twitter-square"></i></a> 
</div> 

                  <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-1x"></i>
                        </div>

                        <div class="logo">

                        </div>


                              <ul>
                                  <li><a href="#">Home</a></li>
                                    <li><a href="#">Login</a></li>
                                  <li><a href="#about">Skills</a></li>
                                  <li><a href="#">Blog</a></li>
                                  <li><a href="#">Projects</a></li>
                                  <li><a href="#">Contact</a></li>
                              </ul>

                  </nav> 

     <div class="parts">      
   <div id="particles-js"></div></div>
            <div class="topbannerbox" >

                <div class="wrap" >
    <br>


                    <div class="mobilelogo"><center><img class="logoscreen logoscreen1440 logoscreen1080 logoscreen1366" src="css/imgs/lojo2.png"></center></div>
</div> 
                <center><hr width="45%" style="border: 1px dashed #7f7a77;" /></center>
                <br>
                <div class = "topmid2"> <center><h1 >Because average is not acceptable, </h1></center></div>
               <br>
                <div class = "topmid"><center><h2><font color="455268" ><b>we go beyond to bring you a memorable experience. </b></font></h2></center></div>
                <br>

               <div class="headbutton headbutton1080 headbutton1366 headbuttonm"> <a class="btn btn-full" href="#about">Who am I ?</a>

</div>




            </div>


        </header>

Here is how the header looks like at top

and here as I scroll down the background image doess well , LEAVING THE TEXT AND BUTTON BEHIND to go down on the body

我真的很想弄清楚这一点..希望有人能帮助我修复它。

我尝试了很多事情，但对我没有用..

有什么想法吗？

Answer 1

您的示例图片都没有显示出来，因此我很难在不查看所有代码的情况下准确地说出您的问题是什么以及您想要的行为，但这听起来像是一个与之相关且很可能可以解决的问题调整元素的z-index。

元素的z-index本质上告诉浏览器您希望元素显示在其中的顺序（它们相互重叠）。您可以在此处详细了解其工作原理：MDN z-index documentation

尝试在要显示在顶部的项目上将z-index设置为1。如果您可以用图片更新您的帖子，我可能会给您一个更直接的答案。祝你好运！

Answer 2

我猜您正在尝试实现一种效果，即页眉不会随着页面滚动而滚动，而是会保留在原位，并在您向下滚动页面时被页面的其余部分覆盖。

>

您可以通过设置标头position：fixed并为要滚动的元素设置更高的z-index来实现此目的，但是您还需要将该元素设置为position：relative。该答案说明了原因：z-index not working with fixed positioning

使DIV向下滚动隐藏在身体后面

2 个答案: