我有一个问题,我的侧面导航(出现在较小的屏幕上)并不会覆盖身体的内容(文字,图片等)。我的z-index设置为500为我的侧导航,0为我的身体内容,这似乎没有解决我认为的问题。
这是一个jfiddle:https://jsfiddle.net/timothykeyseraude/0w5wynLs/
html {
height: 100%
}
谢谢!
答案 0 :(得分:2)
将z-index:1添加到" navbar-header-foundation"课程,你的问题将得到解决。
答案 1 :(得分:0)
你的问题是你在p标签上使用position: absolute
...所以请关闭它,这将解决您的问题,如果您想将文字居中,可以使用text-align: center
答案 2 :(得分:0)
将侧面导航放在标题之外,heasder将获取其父标题的z-index。见下文。
// script.js
// ======= NavBar ======= //
function openNav() {
document.getElementById("side-navigation").style.width = "100%";
}
function closeNav() {
document.getElementById("side-navigation").style.width = "0";
}

@import "compass/css3";
@import "compass";
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #333;
min-height: 100vh;
}
/* jQuery */
.hidden {
display: none;
}
/* ======= Background Image ======= */
body.home {
background-image: URL("images/bc/Homebc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body.about {
background-image: URL("images/bc/Aboutbc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body.approach {
background-image: URL("images/bc/Approachbc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body.contact {
background-image: URL("images/bc/Contactbc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body.tac {
background-image: URL("images/bc/Termsbc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body.privacy {
background-image: URL("images/bc/Privacybc.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
/* ======= NavBar ======= */
#body-content {
z-index: 0;
}
/* --- top nav section --- */
.navbar-header-foundation {
position: fixed;
left: 0;
right: 0;
height: 55px;
background-color: #272727;
}
.top-navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #272727;
font-family: Century Gothic, sans-serif;
font-size: 11px;
float: left;
display: inline-block;
}
.top-navigation li {
float: left;
border-right: 1px solid black;
display: inline;
height: 55px;
}
.top-navigation a {
display: block;
color: white;
text-align: center;
padding: 22px 50px;
text-decoration: none;
border: 1px;
float: left;
}
.top-navigation a:hover:not(.active) {
background-color: #111;
}
.top-navigation a.active {
background-color: #52BA56;
}
.header__logo {
float: right;
}
.brand__logo {
height: 55px;
width: 183px;
}
/* <> Top Nav Responsive Adjustments <> */
@media screen and (max-height: 700px) {
.navbar-header-foundation {
position: fixed;
left: 0;
right: 0;
height: 50px;
background-color: #272727;
}
.brand__logo {
height: 50px;
width: 167px;
}
.top-navigation {
font-size: 10px;
}
.top-navigation li {
height: 50px;
}
.top-navigation a {
padding: 20px 50px;
}
.responsive__button {
font-size: 22px;
}
}
/* --- side nav section --- */
.responsive__button {
display: none;
}
.side-navigation {
height: 100%;
width: 0;
position: fixed;
z-index: 500;
top: 0;
left: 0;
background-color: #111;
opacity: 1;
overflow-x: hidden;
transition: .85s;
padding-top: 58px;
}
.side-navigation a:not(:first-child) {
padding: 22px 10px 22px 25px;
text-decoration: none;
font-size: 11px;
font-family: Century Gothic;
color: white;
display: block;
transition: 0.44s;
}
.side-navigation a:not(:first-child) {
border-bottom: 1px solid black;
}
.side-navigation a:nth-child(2) {
border-top: 1px solid black;
}
.side-navigation a:hover {
color: #f1f1f1;
}
.button-close-side-navigation {
top: 9px;
right: 25px;
font-size: 35px;
position: absolute;
text-decoration: none;
color: #52BA56;
}
@media screen and (max-width: 800px) {
.top-navigation {
display: none;
}
.responsive__button {
display: inline-block;
font-size: 25px;
color: #52BA56;
margin-left: 17px;
margin-top: 10px;
}
}
.content-container {
z-index: 0;
}
.content2 {
position: absolute;
top: 10ex;
left:10em;
right: 0;
bottom: 0;
color: white;
z-index: 0;
}
&#13;
<body class="home" id="body-content">
<section class="Navbar">
<div id="NavBar-Navigation-Menu">
<header class="navbar-header-foundation">
<a href="#" class="header__icon" id="header__icon"></a>
<a href="Index.html" class="header__logo" style="height: 0px">
<img src="images/brandlogoNAV.png" class="brand__logo">
</a>
<nav class="top-navigation" id="top-navigation">
<li><a class="active" href="Index.html">HOME</a></li>
<li><a href="About.html">ABOUT</a></li>
<li><a href="Approach.html">OUR APPROACH</a></li>
<li><a href="CONTACT.html">CONTACT</a></li>
</nav>
<span class="responsive__button" onclick="openNav()">☰</span>
</header>
<nav class="side-navigation" id="side-navigation">
<a href="javascript:void(0)" class="button-close-side-navigation" onclick="closeNav()">×</a>
<a href="Index.html">HOME</a>
<a href="About.html">ABOUT</a>
<a href="Approach.html">APPROACH</a>
<a href="Contact.html">CONTACT</a>
</nav>
</div>
</section>
<section>
<div class="content-container">
<p class="content2">
aoefegfoyaefaerfuivba
<br>
<BR>bdiwubdiuwdwug
<br>jwehdiuHFIUW
<br>
</p>
</div>
</section>
&#13;