Question

使用section div类的内容在navbar下方可见。只需向下滚动即可使用以下示例重现。我该如何防止这种情况？

非常感谢所有帮助。谢谢。

<title>test</title>
<style>
		
		body {margin:0;}

		.navbar {
		  overflow: hidden;
		  background-color: #333;
		  position: fixed;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}

		.navbar a {
 		  display: inline-block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		  font-size: 17px;
		}

		.navbar a:hover {
		  background: #ddd;
		  color: black;
		}

		.section {
        position: relative;
    }
    .anchor {
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        z-index: -1;
        top: -50px;
        left: 0;
        visibility: hidden;
}

</style>

<body>

<div class="navbar">
  <a href="#item1">item1</a>
  <a href="#item2">item2</a>
  <a href="#item3">item3</a>
  <a href="#item4">item4</a>
  <a href="#item5">item5</a>
</div>

<div class="w3-row-padding" style="max-width: 50em;margin: auto; margin-top: 50px;">
  <div class="w3-full">

    <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

    <br>
  </div>
  <hr>

  <div class="w3-full section">
    <span id="lets" class="anchor"></span>
    <h1 style="margin-bottom:0px;">Test</h1>

    <p>This text will be covered</p>

  </div>


  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</div>

Answer 1

您可以使用z-index将导航栏放在其他内容上。

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  /*this line*/
}

.navbar a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.section {
  position: relative;
}

.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  top: -50px;
  left: 0;
  visibility: hidden;
}

<div class="navbar">
  <a href="#item1">item1</a>
  <a href="#item2">item2</a>
  <a href="#item3">item3</a>
  <a href="#item4">item4</a>
  <a href="#item5">item5</a>
</div>

<div class="w3-row-padding" style="max-width: 50em;margin: auto; margin-top: 50px;">
  <div class="w3-full">

    <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

    <br>
  </div>
  <hr>

  <div class="w3-full section">
    <span id="lets" class="anchor"></span>
    <h1 style="margin-bottom:0px;">Test</h1>

    <p>This text will be covered</p>

  </div>


  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

  <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</div>

防止通过导航栏显示主要内容

1 个答案: