如果导航栏遵循我在主体上设置的边距，如何阻止导航栏重叠内容？
[英]How can I stop the Nav Bar from overlapping my content if it follows the margin that I set on the body?
问题描述
当我尝试添加页边空白以替换隐藏在导航栏下的内容时，即使固定，导航条也会与主体一起移动。
我研究了一下，其他的答案提供了相同的反应是什么我已经试过如本
我已经尝试了很多方法，大部分都弄乱了边距，并弄乱了身体和导航栏，但似乎没有任何工作如我所愿。
这是CSS和HTML：
body { background-color: red; margin: 0; padding: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: green; position: fixed; width: 100%; } li { float: left; } li a, .dropbtn { display: inline-block; text-align: center; padding: 20px 20px; text-decoration: none; line-height: 20px; color: #FFF1CF; } li a:hover, .dropdown:hover .dropbtn { background-color: #000; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: #FFF1CF; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: green; } .dropdown:hover .dropdown-content { display: block; position: fixed; } .ul { position: fixed; top: 0; width: 100%; } .txt { display: inline-block; background-color: #3399FF; color: white; font-size: 20px; border: 5px solid gray; margin: 5px; width: 640px; } #textdiv { width: 1000px; height: 800px; margin-left: auto; margin-right: auto; } .sideborder1 { height: 600px; width: 400px; position: absolute; left: 0%; } .sideborder2 { height: 600px; width: 400px; position: absolute; right: 0%; } .centerimg { position: absolute; margin-left: auto; margin-right: auto; z-index: -1; left: 30%; } .dropdiv { padding-top: 10%; } .font1 /*Regular Text*/ { font-family: 'Times New Roman', cursive; font-size: 2em; text-align: center; } .font2 /*Title*/ { font-family: 'Times New Roman', cursive; font-size: 2em; color: #FFF1CF; } #font3 /*SubTitle*/ { font-family: 'Times New Roman', cursive; font-size: 1.2em; } .tryingtowork { /*background-image: url("RBS.png"); background-position:0% 40%;*/ width: 100%; overflow: hidden; } .tryingtowork2 { background-color: #AAA; width: 100%; overflow: hidden; } .tryingtowork3 { background-color: #CCC; width: 100%; overflow: hidden; } .tryingtowork4 { background-color: #BBB; width: 100%; overflow: hidden; margin-bottom: 100px; } .blogpost { background-color: #CCC; overflow: hidden; border-bottom: 2px dashed #FFF } #blogcontainer { width: 70%; margin: auto; background-color: FFF; border: 5px solid #FFF }
<!doctype html> <header> <title>RBS - Home</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="icon" href="RBS.ico"> </header> <body> <nav> <ul> <li style="padding-right:20%;padding-left:2.5%;letter-spacing:.3em;"> <a class="font2" href="index.html">RBS</a> </li> <li id="font3" class="dropdown"> <a href="games.html" class="dropbtn">Games</a> <div class="dropdown-content"> <a href="#Evolution">Game?</a> </div> </li> <li id="font3" class="dropdown"> <a href="community.html" class="dropbtn">Community</a> <div class="dropdown-content"> <a href="Blog.html">Blog</a> <a href="#Facebook">Facebook</a> <a href="#Twitter">Twitter</a> <a href="#Reddit">Reddit</a> </div> </li> <li id="font3"> <a href="about.html">About Us</a> </li> </ul> </nav> <section class="tryingtowork"> <p class="font1"> Hello (Info Goes Here) <br>This is our community page <br>Here is where we can display news and other things: <br> <br> <br>And here is other stuff </p> </section> <section class="tryingtowork2"> <p class="font1"> ShowCase Goes Here </p> </section> <section class="tryingtowork3"> <p class="font1"> News Goes Here </p> </section> <section class="tryingtowork4"> <p class="font1"> Social Media Goes Here <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>B </p> </section </body> </html>
这是JSFiddle
编辑：
谢谢你们！ 我没有意识到我有两个UL，一个属于一个类，另一个则影响所有UL，因此我的top：0从未被读取过。 这很有帮助！
4 个解决方案
解决方案1
1 已采纳 2016-09-12 07:38:09
在body 30px上添加填充并在导航ul上应用top:0
body {
background-color: red;
margin: 0;
padding: 30px 0 0;
}
ul {
background-color: green;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
解决方案2
1 2016-09-12 07:45:16
因此，我对您的代码进行了两项更改：
在
nav元素的ul中添加了top: 0。在最上面的部分添加了一些边距-使用
calc进行调整：.tryingtowork { /*background-image: url("RBS.png"); background-position:0% 40%;*/ width: 100%; overflow: hidden; margin-top: calc(40px + 1.2em); }
就是这样。 让我知道您对此的反馈。 谢谢！
body { background-color: red; margin: 0; padding: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: green; position: fixed; top: 0; width: 100%; } li { float: left; } li a, .dropbtn { display: inline-block; text-align: center; padding: 20px 20px; text-decoration: none; line-height: 20px; color: #FFF1CF; } li a:hover, .dropdown:hover .dropbtn { background-color: #000; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: #FFF1CF; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: green; } .dropdown:hover .dropdown-content { display: block; position: fixed; } .ul { position: fixed; top: 0; width: 100%; } .txt { display: inline-block; background-color: #3399FF; color: white; font-size: 20px; border: 5px solid gray; margin: 5px; width: 640px; } #textdiv { width: 1000px; height: 800px; margin-left: auto; margin-right: auto; } .sideborder1 { height: 600px; width: 400px; position: absolute; left: 0%; } .sideborder2 { height: 600px; width: 400px; position: absolute; right: 0%; } .centerimg { position: absolute; margin-left: auto; margin-right: auto; z-index: -1; left: 30%; } .dropdiv { padding-top: 10%; } .font1 /*Regular Text*/ { font-family: 'Times New Roman', cursive; font-size: 2em; text-align: center; } .font2 /*Title*/ { font-family: 'Times New Roman', cursive; font-size: 2em; color: #FFF1CF; } #font3 /*SubTitle*/ { font-family: 'Times New Roman', cursive; font-size: 1.2em; } .tryingtowork { /*background-image: url("RBS.png"); background-position:0% 40%;*/ width: 100%; overflow: hidden; margin-top: calc(40px + 1.2em); } .tryingtowork2 { background-color: #AAA; width: 100%; overflow: hidden; } .tryingtowork3 { background-color: #CCC; width: 100%; overflow: hidden; } .tryingtowork4 { background-color: #BBB; width: 100%; overflow: hidden; margin-bottom: 100px; } .blogpost { background-color: #CCC; overflow: hidden; border-bottom: 2px dashed #FFF } #blogcontainer { width: 70%; margin: auto; background-color: FFF; border: 5px solid #FFF }
<!doctype html> <header> <title>RBS - Home</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="icon" href="RBS.ico"> </header> <body> <nav> <ul> <li style="padding-right:20%;padding-left:2.5%;letter-spacing:.3em;"> <a class="font2" href="index.html">RBS</a> </li> <li id="font3" class="dropdown"> <a href="games.html" class="dropbtn">Games</a> <div class="dropdown-content"> <a href="#Evolution">Game?</a> </div> </li> <li id="font3" class="dropdown"> <a href="community.html" class="dropbtn">Community</a> <div class="dropdown-content"> <a href="Blog.html">Blog</a> <a href="#Facebook">Facebook</a> <a href="#Twitter">Twitter</a> <a href="#Reddit">Reddit</a> </div> </li> <li id="font3"> <a href="about.html">About Us</a> </li> </ul> </nav> <section class="tryingtowork"> <p class="font1"> Hello (Info Goes Here) <br>This is our community page <br>Here is where we can display news and other things: <br> <br> <br>And here is other stuff </p> </section> <section class="tryingtowork2"> <p class="font1"> ShowCase Goes Here </p> </section> <section class="tryingtowork3"> <p class="font1"> News Goes Here </p> </section> <section class="tryingtowork4"> <p class="font1"> Social Media Goes Here <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>A <br>B </p> </section </body> </html>
解决方案3
0 2016-09-12 07:41:16
您只需要移动自己的position:fixed; 从<ul>元素到<nav>元素，并添加width:100%;
然后，您可以向内容中添加填充，以防止其被导航栏重叠。
我已经使用以下更改更新了您的JSfiddle： https ://jsfiddle.net/michaelsherry/823r43gm/2/
CSS应该是：
nav {
position:fixed;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
width:100%;
}
希望这可以帮助。
解决方案4
0 2016-09-12 07:42:37
我将修复<nav>而不是<ul> ，并在内容的第一块上添加空白。
nav{position:fixed; top:0; left:0;}
.tryingtowork { margin-top: 30px;}
如何使页脚停止与移动导航栏重叠？ 在移动视图中，导航栏位于页脚下方。 任何解决方案？
[英]How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?
如何阻止导航栏干扰模式关闭按钮的功能？
[英]How can I stop nav-bar from interfering with modal close button's functionality?
将鼠标悬停在导航栏图标上时，如何阻止它们消失？ 使用引导程序
[英]How can I stop nav bar icons from disappearing when hovering over them? using bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.