如果導航欄遵循我在主體上設置的邊距，如何阻止導航欄重疊內容？
[英]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.