我创建了一个标头,position: fixed
并在其下方添加了一个使用图像替换的徽标。但是,当我向下滚动时,图像会移动到标题上方而不是下方。
如何让固定标题始终位于顶部(即强制图像在其下方移动)?
这是我的代码的一部分:
HTML
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
</ul>
</nav>
</header>
<div class="banner">
<h1><img src="imgs\logo.png" />Jackle</h1>
<h3>We design and create.</h3>
</div>
<img src="" class="representationBannerPic">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis recusandae ullam dolores sint eligendi voluptatibus incidunt esse vero totam aspernatur. Iste quae molestias sed enim corrupti rerum nam culpa asperiores.</p>
CSS
header
{
background-color: black;
width: 100%;
height: 47px;
color: white;
position: fixed;
}
.banner
{
background-color: #3b97b1;
background-color: #5fa1b4;
height: 247px;
width: 100%;
}
.banner h1
{
text-align: center;
position: relative;
top: 100px;
text-indent: -9999px;
}
.banner h1 img
{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 60px;
margin-top: -30px; /* Half the height */
margin-left: -100px; /* Half the width */
padding-top: 20px;
}
如果您需要查看更多内容,可以在此处找到完整代码。