如何在导航栏中添加背景答案

【问题标题】：How to put background in a navigation bar如何在导航栏中添加背景
【发布时间】：2014-01-30 07:16:27
【问题描述】：

我试图在这个导航栏后面放置一个纯白色背景，这样当它滚动时它不会显示它后面的内容。

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;
}

它工作正常吗？

【问题讨论】：

标签： css list html background nav

【解决方案1】：

为标题提供固定位置：- DEMO

#header {
position: fixed;
}

【讨论】：

【解决方案2】：

因为有position:fixed currety navbar 不是#header 的一部分。所以 HTML 结构应该稍微改变一下。

将position:fixed 添加到#header 而不是导航栏
为body content 部分添加一个父div 并给出top margin（顶部边距= 标题高度）

DEMO

【讨论】：