如果导航栏遵循我在主体上设置的边距，如何阻止导航栏重叠内容？
[英]How can I stop the Nav Bar from overlapping my content if it follows the margin that I set on the body?
问题描述
When I try adding margin to displace the content that is hidden under the Nav Bar, the bar moves with the body even though it is fixed. 
当我尝试添加页边空白以替换隐藏在导航栏下的内容时，即使固定，导航条也会与主体一起移动。
I researched a bit and other answers provide the same response to what I've tried such as this 我研究了一下，其他的答案提供了相同的反应是什么我已经试过如本
I have tried plenty of things, mostly messing with margins and padding in the body and navbar but nothing seems to work as i'd like. 我已经尝试了很多方法，大部分都弄乱了边距，并弄乱了身体和导航栏，但似乎没有任何工作如我所愿。
Here is the CSS and HTML: 这是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>
and here is the JSFiddle 这是JSFiddle
EDIT: 编辑：
Thank you all! 谢谢你们！ I didn't realize I had two ULs, one a class and the other just affecting all UL so my top:0 was never being read. 我没有意识到我有两个UL，一个属于一个类，另一个则影响所有UL，因此我的top：0从未被读取过。 This helped lots! 这很有帮助！
4 个解决方案
解决方案1
1 已采纳 2016-09-12 07:38:09
add padding on body 30px & apply top:0 on navigation ul 在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%;
}
https://jsfiddle.net/823r43gm/1/ https://jsfiddle.net/823r43gm/1/
解决方案2
1 2016-09-12 07:45:16
So I made two changes to your code: 因此，我对您的代码进行了两项更改：
Added
top: 0to theulin thenavelement.在nav元素的ul中添加了top: 0。Added some margin to the topmost section- used
calcto adjust it:在最上面的部分添加了一些边距-使用calc进行调整：.tryingtowork { /*background-image: url("RBS.png"); background-position:0% 40%;*/ width: 100%; overflow: hidden; margin-top: calc(40px + 1.2em); }
And that's it. 就是这样。 Let me know your feedback on this. 让我知道您对此的反馈。 Thanks! 谢谢！
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
You just need to move your position:fixed; 您只需要移动自己的position:fixed; from the <ul> element to the <nav> element and also add width:100%; 从<ul>元素到<nav>元素，并添加width:100%;
Then you can add padding to your content to stop it from being overlapped by the nav bar. 然后，您可以向内容中添加填充，以防止其被导航栏重叠。
I have updated your JSfiddle with the changes here: https://jsfiddle.net/michaelsherry/823r43gm/2/ 我已经使用以下更改更新了您的JSfiddle： https ://jsfiddle.net/michaelsherry/823r43gm/2/
CSS should be: CSS应该是：
nav {
position:fixed;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
width:100%;
}
Hope this helps. 希望这可以帮助。
解决方案4
0 2016-09-12 07:42:37
I would fix the <nav> not the <ul> , and put a margin on the first block of content. 我将修复<nav>而不是<ul> ，并在内容的第一块上添加空白。
nav{position:fixed; top:0; left:0;}
.tryingtowork { margin-top: 30px;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何删除导航栏上的右边距？ - How can I remove the right-margin on my nav bar?
如何使页脚停止与移动导航栏重叠？ 在移动视图中，导航栏位于页脚下方。 任何解决方案？ - 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 resolve my footer overlapping the body content?
如何阻止 div 重叠？ - How can I stop divs from overlapping?
如何在悬停导航栏上停止其他文本向下移动？ - How can I stop other text moving down on my Nav bar on hover?
如何阻止导航栏干扰模式关闭按钮的功能？ - 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
如何修复导航栏和第一个标题的重叠？ - How do i fix overlapping for my nav bar and my first header?
垂直调整浏览器大小时如何阻止内容重叠？ - How do I stop my content from overlapping when resizing browser vertically?
如何阻止横幅与其他内容重叠？ - How do I stop the banner from overlapping other content?
相关标签