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设置为页面顶部的固定元素。

防止图像与固定标题重叠

1 个答案: