堆栈内存溢出
  繁体   English   中英

导航栏遮盖/重叠页面内容

[英]Navbar overshadows/overlaps the content of a page

 原文  2022-02-09 10:23:24  1   3    html/ css/ nav

问题描述

所以我正在学习 HTMl/css 并且遇到了这个问题：

宽屏； 导航栏覆盖内容

较小的屏幕； 导航栏更多地覆盖了内容

以下是重现此问题的一些示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>Fixed Top Navigation Bar</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

我的问题是，有谁知道如何在导航栏下制作所有内容，go 在导航栏下？ 这样导航栏就不会覆盖内容？

提前致谢！

3 个解决方案

解决方案1
 0  2022-02-09 10:34:23

只需创建固定大小的导航栏并将相同大小的padding-top属性添加到父 div。

解决方案2
 0  2022-02-09 10:34:44

简单地说，只需使用position: sticky而不是position: fixed ：

ul {
  position: sticky;
}

sticky允许您将容器“粘贴”到 window 而不是文档（就像fixed所做的那样）。 因此，它不会漂浮在文档上并覆盖其他内容。

解决方案3
 0 已采纳  2022-02-09 10:38:08

 body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; /*position: fixed;*/ top: 0; width: 100%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; }.active { background-color: #04AA6D; } body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; /*position: fixed;*/ top: 0; width: 100%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; }.active { background-color: #04AA6D; }.divb{ /*margin-top:30px;*/ }
 <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div style="padding:20px;background-color:#1abc9c;height:1500px;" class="divb"> <h1>Fixed Top Navigation Bar</h1> <h2>Scroll this page to see the effect</h2> <h2>The navigation bar will stay at the top of the page while scrolling</h2> <p>This answer prevents it!</p> </div>

只需删除position: fixed; 我评论过他们

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 页脚导航栏与内容重叠 固定的导航栏重叠内容 顶部导航栏与主要内容重叠 在 Twitter Bootstrap 中使用下拉导航栏按钮时，它会扩展并掩盖下面的内容 页面缩放/内容重叠 页脚与页面内容重叠 单击链接时，导航栏会与固定导航引导页面中的内容重叠 Bootstrap导航栏标题与小屏幕上的内容重叠 内容与移动Safari中的绝对引导导航栏重叠 实现 css 扩展导航栏与以下内容重叠
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM