所以我有一个网站的这个小开始，我希望顶部菜单保持在其他任何内容之上。我使用了 position:fixed ，现在它确实位于所有内容之上，除了一个显示徽标的 div ......我尝试使用 z-index 但这没有帮助。如果可能的话，我如何在不使用 Js 的情况下强制该标题保持在顶部...
“blackBar”在标题顶部传递，但它是唯一这样做的......
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li><a href="#">Stuff1</a></li>
<li><a href="#">Stuff2</a></li>
<li><a href="#">Stuff3</a></li>
<li><a href="#">Stuff4</a></li>
<li><a href="#">Stuff5</a></li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
这是CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}