[英]HTML Element set to Relative Position covers Top Navigation bar set to Fixed
我将顶部导航栏设置为固定位置,并且将文章元素设置为窗口高度。 当我将article元素设置为relative时,不再显示导航栏。
我如何才能使该文章成为窗口的高度,而导航栏就停留在其上方。
这是我的代码。
<article id="navWrap">
<nav>
<ul>
<li><a href="#headWrap">Home</a></li>
<li><a href="#workWrapper">My Work</a></li>
<li><a href="#contactpage">Contact</a></li>
</ul>
</nav>
</article>
<article id="headWrap" class="head clearIt">
<header>
<p class="headpar">Hello I'm</p>
<h1 class="headText">Sebastian</h1>
<p class="headinfo">Web Developer | Corona SDK Developer | PHP Junkie</p>
</header>
</article>
和CSS
#navWrap{
height: 100px;
width: 100%;
position: fixed;
}
nav{
width: 300px;
padding-top: 39px;
float: right;
}
nav ul{
list-style: none;
margin: 0px;
padding: 0px;
}
nav ul li{
display: inline;
margin-right: 30px;
}
nav ul li a{
text-decoration: none;
font-family: 'Open Sans', sans-serif;
padding: 0px 0px 5px 0px;
margin: 0px;
color: #fff;
}
nav ul li a:hover{
border-bottom: 1px solid #fff;
}
/*Used to clear floats*/
.clearIt{
clear: both;
}
#headWrap{
width: 100%;
height: 100px;
background-color: #2980b9;
position: relative;
}
和JS使文章窗口高度
<script type="text/javascript">
$("#headWrap").height($(window).height());
</script>
添加top:100px;
到#headWrap
的现有CSS,将其下推到#navWrap
以下
#headWrap{
top:100px;
}
完成此操作后,您将无法在白色背景上看到白色文本。 因此添加background:#eee;
到#navWrap
的现有CSS。
#navWrap{
background:#eee;
}
我最终将nav元素的z-index设置为2。
其余元素设置为1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.