Question

当向下滚动网站上的页面时，我需要将网站上的导航栏固定到位。我认为我的代码是正确的，因为它固定到位，但当我向下滚动它看起来对页面的图像/部分是透明的 - 我希望它是坚实的，所以这些部分似乎在它后面滚动。

这是我目前的代码 -

<header>
        <nav>
            <a href="#logo">Home</a>
            <a href="#whatwedo">What we do</a>
            <a href="#whoweare">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="Blog">Blog</a>
        </nav>
</header>

的style.css

header {
  height: 50px;
  background-color: #fff;
}

nav {
    overflow: hidden;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;

}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  border-bottom: 2px solid transparent;

}

Answer 1

我认为您应该在z-index:999上使用<nav>。

Answer 2

将nav元素的z-index更改为999，然后为图像/部分添加位置：relative和z-index：1

Answer 3

为导航添加 z-index z-index：444 / 添加这个 /;

header {
  height: 50px;
  background-color: #fff;
}

nav {
    overflow: hidden;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index:444 /*add this one*/;
}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  border-bottom: 2px solid transparent;

}

<header>
        <nav>
            <a href="#logo">Home</a>
            <a href="#whatwedo">What we do</a>
            <a href="#whoweare">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="Blog">Blog</a>
        </nav>
</header>

<div class="cont">

Parturient urna netus a vestibulum justo ridiculus pharetra eros fringilla consectetur volutpat porta varius dolor non risus. Scelerisque dignissim dictum aptent nisl quisque parturient adipiscing laoreet consectetur a vestibulum himenaeos nisl scelerisque a a duis mus scelerisque tempor. Justo ad suspendisse curabitur justo mauris amet ac nec eros quam parturient a viverra habitasse condimentum hac consectetur convallis at curae est nunc primis. Quis auctor adipiscing vestibulum aliquet ornare orci ante a turpis mus odio vehicula laoreet malesuada. Parturient ultrices porta scelerisque vulputate vivamus ut eget malesuada mattis a fusce bibendum ullamcorper condimentum parturient augue sapien eu ridiculus ullamcorper in neque quam ac condimentum parturient sed aptent. Purus nec condimentum vestibulum purus at ut a ultrices natoque fames parturient pulvinar vestibulum in per condimentum rhoncus commodo volutpat primis ante pharetra vitae parturient vestibulum a platea elit. Scelerisque nullam ligula a a lorem ac euismod lectus consequat justo auctor elementum urna adipiscing at parturient erat ut.

Ullamcorper suscipit at in fermentum eu parturient primis rhoncus ridiculus at a feugiat sem vestibulum hendrerit magnis consectetur vestibulum erat quisque adipiscing lectus adipiscing ullamcorper a. Montes eget eros euismod ridiculus adipiscing cras suspendisse est potenti fermentum a facilisi purus a a eros suspendisse dui praesent rhoncus sociis et a congue a pulvinar nullam. Magna scelerisque a ullamcorper suscipit blandit hendrerit posuere parturient ridiculus montes fringilla suspendisse tempus et cubilia suspendisse nam consequat curabitur habitant nisi mi. Interdum condimentum ut faucibus parturient vestibulum mattis suspendisse scelerisque aptent enim et nulla leo nam eros feugiat per elit hac sociis non a curae pretium interdum auctor dolor.

Id adipiscing donec libero ligula elementum proin condimentum consectetur cursus netus ullamcorper vestibulum purus feugiat a hac nisi at leo ullamcorper condimentum ad mus per eu donec. A nullam condimentum nam condimentum turpis condimentum blandit justo cras dictumst mattis est suscipit consectetur eget augue parturient integer tincidunt a placerat litora. Ullamcorper cubilia vestibulum curabitur potenti rutrum scelerisque cum a per scelerisque sodales blandit malesuada a vestibulum mi sem. Ad suspendisse odio eget sociosqu a a eleifend est consectetur adipiscing suspendisse ultrices ullamcorper montes condimentum adipiscing parturient ullamcorper sem ac sit adipiscing ut. Varius aliquam vestibulum inceptos a a condimentum dictumst montes at phasellus penatibus fermentum a quam diam vestibulum aptent mauris mi a lacinia volutpat justo arcu a a.

Nisi porta convallis a etiam a parturient sodales arcu eget malesuada posuere commodo hac enim cras consectetur a pretium imperdiet ridiculus. Vestibulum parturient fermentum et duis rhoncus nisl nostra adipiscing natoque parturient consequat ut a diam turpis libero ridiculus a facilisi tincidunt vitae dis adipiscing hac leo tempus. Scelerisque dapibus parturient justo parturient eget montes euismod adipiscing parturient nec cras mus suspendisse dis id suscipit at suspendisse nisl dictum a pharetra. Placerat aliquet elit scelerisque a phasellus consectetur at eget a nostra mi a enim maecenas integer a. Himenaeos integer malesuada dolor parturient nec aptent urna sociis bibendum a volutpat nascetur a turpis a sodales tempor. Eu potenti lorem blandit quam dapibus elit mus volutpat parturient sociosqu habitasse imperdiet facilisis potenti metus ac adipiscing metus.

Quisque a aptent quam non ad a eleifend habitant nam commodo consectetur ut sed suspendisse dolor leo arcu vestibulum iaculis dolor parturient. Ligula praesent scelerisque eu mollis consectetur a vestibulum scelerisque molestie condimentum ut dui ac laoreet egestas malesuada nibh nullam dictumst. Iaculis eu quam a egestas vehicula eu orci id porta purus sodales adipiscing volutpat morbi a ad nunc facilisi a ut litora tempus mauris.

Parturient a nisl nec vestibulum vivamus et ullamcorper curae sed pretium faucibus ullamcorper hendrerit per mi adipiscing felis parturient adipiscing fames lobortis adipiscing fermentum at metus dictum potenti ac.Habitant tincidunt ullamcorper imperdiet risus a commodo id litora tempus aliquet vestibulum parturient auctor porttitor condimentum quis gravida donec purus parturient parturient nam class consectetur.Commodo adipiscing.
<div>

导航栏 - 固定位置

3 个答案: