Question

我试图在这个导航栏后面放置一个坚实的白色背景，所以当它滚动时它没有显示它背后的什么。

CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo

    <div id="header">
    <img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/> 
        <div id="nav_bar" style:"color:#FFF;">
            <header id="title">Lanier Canoe and Kayak Club</header>
            <ul id="nav_words">
            <a href="#" id="menu_item"><li class="selected items">Home</li></a>
            <a href="#" id="menu_item"><li class="items">About Us</li></a>
            <a href="#" id="menu_item"><li class="items">Programs</li></a>
            <a href="#" id="menu_item"><li class="items">Rentals</li></a>
            <a href="#" id="menu_item"><li class="items">Contact Us</li></a>
            </ul>
        </div>
</div>

理论上我应该能够放

#header {
    width: 100%;
    height: 150px;
    padding-bottom:20px;
    background-color:#FFFFFF;
    border:
    z-index: 3;
    color:white;
}

它的工作正确吗？

Answer 1

为标题指定固定位置： - DEMO

#header {
position: fixed;
}

Answer 2

由于position:fixed当前navbar不属于#header。所以HTML结构应该稍微改变一下。

将position:fixed添加到#header而不是导航栏
为body content部分添加一个paernt div并提供top margin（margin top = header 高度）

<强> DEMO

如何将背景放在导航栏中

2 个答案: