Question

每当我滚动时，我都试图将导航栏设置在顶部，但是当我使用position：fixed;导航栏消失了。这是我的html和css。

<nav>
<div class="navbar">
<button class="btn button"> Home <A href="#">   </button>
<button class="btn button"> About Me </button>
<button class="btn button"> Portfolio</button>
<button class="btn button"> Contact Me           </button>
</div>
</nav>

<div class="background-img">

</div>

<div class="portfolio">

<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636">


</div>

CSS

 nav{
     background-color: transparent;
     position: fixed;
 }

.btn{
    background-color: Black;
    color: white;
    font-size: 30px;
    padding: 10px;
    margin: 10px 193px 10px 0px;

}

.background-img {
    background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: relative; 
}

`

Answer 1

您仍然需要将其定位为top:0。

 nav{
      background-color: transparent;
      position: fixed;
      top:0;
      width:100%;
      z-index:15;
     }

Answer 2

原因是z-index值。还有一件事你可能忘记在nav部分关闭一个标签。

 nav{
     background-color: transparent;
     position: fixed;
     z-index:99999; /* add z-index value maximum */
 }

.btn{
    background-color: Black;
    color: white;
    font-size: 30px;
    padding: 10px;
    margin: 10px 193px 10px 0px;

}

.background-img {
    background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: relative; 
}

<nav>
<div class="navbar">
<button class="btn button"> <a href="#">Home</a> </button><!-- You need to close the a tag -->
<button class="btn button"> About Me </button>
<button class="btn button"> Portfolio</button>
<button class="btn button"> Contact Me  </button>
</div>
</nav>

<div class="background-img">

</div>

<div class="portfolio">

<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636">


</div>

无论我在何处滚动

2 个答案: