我创建了一个带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;
}
如果您需要查看更多内容,则整个代码可以是found here。
答案 0 :(得分:12)
将以下规则添加到标题样式中:
header
{
/* ... */
z-index: 99;
}
z-index
属性指定已定位元素的叠加顺序。因此,具有较大z-index
的元素将始终位于具有较低z-index
的元素的前面。将z-index
设置为大于(或甚至等于)0的值会将该元素设置在未定位元素的顶部,而不指定z-index
。您可以始终将其设置为低于99的值,但通常的做法是避免与其他定位元素发生潜在冲突。
答案 1 :(得分:0)
header {
z-index: 1;
}
.banner {
position: relative;
z-index: 0;
}
它适用于所有浏览器,没有任何副作用。