html - 防止图像与固定标题重叠

Question

我有一个包含三个选项卡的固定标题。在页面的其余部分，我有文字和图像。我能够让文本在固定标题“下方”滚动，但图像重叠。我尝试将页眉的背景设置为图像，但这没有用。我也尝试了各种 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;
}

Answer 1

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <!--Tabs Here-->

    </div>
</div>

您必须使用 Bootstrap 功能 (navbar)，而不是让 div 成为页面顶部的固定元素。