我有一个包含三个选项卡的固定标题。在页面的其余部分,我有文字和图像。我能够让文本在固定标题“下方”滚动,但图像重叠。我尝试将页眉的背景设置为图像,但这没有用。我也尝试了各种 z-index 值,但也没有结果。我在标题上发布了没有 z-index 的 CSS,因为它不会在重叠问题方面影响固定标题,而只会将其偏离中心。有没有办法用 CSS 解决这个问题?
谢谢
HTML代码:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS 代码:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
最佳答案
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
您必须使用 Bootstrap 功能 (navbar
),而不是让 div 成为页面顶部的固定元素。
关于html - 防止图像与固定标题重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29061287/