Question

我正在尝试使用HTML和CSS为WordPress构建自定义主题。我遇到的问题是Hero Image似乎总是高于固定的顶部导航栏 - 我尝试搜索类似的帖子，但是找不到这个特定的代码集。向下滚动时，您将看到固定导航消失，然后在Hero Image之后重新出现;我最初的倾向是与位置（相对/绝对）有关，但这种改变并没有帮助。非常感谢任何支持 - 谢谢！

HTML

 <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Designs</title>
    <meta name="keywords" content="Designs" />
    <meta name="description" content="Designs">
    <meta name="copyright" content="Copyright Designs.  All rights reserved." />
    <meta name="publisher" content="Designs" />
    <meta name="author" content="Designs">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Web Font Pulls -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i|Montserrat:400,700" rel="stylesheet">
</head>


<body>

    <div class="topnav">
        <a class="active" href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Experience</a>
        <a href="#contact">Projects</a>
        <a href="#contact">Musings</a>
        <a href="#contact">Contact</a>
      <div class="search-container">
          <form action="/action_page.php">
          <input type="text" placeholder="Search..." name="search">
          <button type="submit"><i class="fa fa-search"></i></button>
        </form>
      </div>
    </div>

        <div class="hero-image">
          <div class="hero-text">
            <h1>This is a hero heading</h1>
   <p>Hero sub text</p>
   <button>Button</button>
 </div>
</div>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>

CSS

 body {
    background-color: powderblue;

 }
  h1 {
    color: blue;
  }
   p {
    color: red;
     }

 {box-sizing: border-box;}

 body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
      }

 .topnav {
    overflow: hidden;
    background-color: #e9e9e9;
    position: fixed;
    top: 0;
    width: 100%;
         }

 .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
           }

 .topnav a:hover {
    background-color: #ddd;
    color: black;
              }

 .topnav a.active {
     background-color: #2196F3;
     color: white;
                 }

 .topnav .search-container {
     float: right;
                }

 .topnav input[type=text] {
     padding: 6px;
     margin-top: 8px;
     font-size: 17px;
     border: none;
           }

 .topnav .search-container button {
     float: right;
     padding: 6px 10px;
     margin-top: 8px;
     margin-right: 16px;
     background: #ddd;
     font-size: 17px;
     border: none;
     cursor: pointer;
              }

   .topnav .search-container button:hover {
        background: #ccc;
                 }

    @media screen and (max-width: 600px) {
      .topnav .search-container {
          float: none;
           }
          .topnav a, .topnav input[type=text], .topnav .search-container button                  
                        {
     float: none;
     display: block;
     text-align: left;
     width: 100%;
     margin: 0;
     padding: 14px;
         }
           .topnav input[type=text] {
           border: 1px solid #ccc;
                 }
                }


 body, html {
    height: 100%;
          }



body, html {
    height: 100%;
    margin: 0;
}

.hero-image {
  background-image: url("https://static.pexels.com/photos/440731/pexels-photo-440731.jpeg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

Answer 1

您是否尝试过将z-index：999添加到.topnav。

Answer 2

您只需要添加z-index：

.topnav {
overflow: hidden;
background-color: #e9e9e9;
position: fixed;
top: 0;
width: 100%;
z-index:1000;//add z-index
}

为什么这个Hero Image覆盖固定导航栏，滚动条后导航栏重新出现？

2 个答案: