Question

我正在尝试在此网站上制作固定菜单：http://www.thethingswemake.co.uk/web_carsonified.htm

菜单是固定的，就像我想要的那样但是主包装器正在上面而不是在菜单下面：这就是我所拥有的http://jsfiddle.net/qacaT/

HTML：

<div id="topWrapper">
    <div id="topContainer">
         <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>

    <nav id="topnav">
        <ul>
            <a href="index.html"><li>Home</li></a>
            <a href="about.html"><li>About</li></a>
            <a href="video.html"><li>Trailers</li></a>
            <button type="button" data-state="0" style="float:right">Cinema Mode</button>
        </ul>
    </nav>   

        <div id="logoTop"></div>
        <div class="clear"></div>
    </div>
</div>


<div id="wrapper">
        <div id="body_div">
        <div id="dimPlayer" class="dim"></div>
        <div id="video_container">
            <video id="trailers" poster="poster.jpg">
                <source src="vLast.mp4" type="video/mp4">
                <source src="vLast.webm" type="video/webm">
            </video>
            <nav>
               <div id="controls" class="cAnimated cFadeInRight">
                    <div id="defaultBar">
                        <div id="progressBar"></div>
                    </div>
                    <button id="playButton">Play</button>
                    <button id="vol" onclick="showSlider()">Vol</button>      
                    <button id="containSlider"> 
                                <input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button>
                    <div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='duration'>0:00</span></div>
                    <button id="full">Full</button>
                    <button id="mute">Mute</button>

               </div> 
               <div id="playlist" class="animated fadeInRight">
                    <div class="thumb" id="tb1"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div>
                    <div class="thumb" id="tb2"><img src="TbLast.jpg" onClick="changeTrailer('vLast')"/></div>
                    <div class="thumb" id="tb3"><img src="TbTwo.jpg" onClick="changeTrailer('vTwo')"/></div>
               </div>
            </nav>
        </div>



    <aside id="sidebar">
    <div id="side_events">
        <h1>News</h1>
        <ul id="events">
            <li>Half-Life 3 Release: <time>04/01/13</time></li>
            <li>Borderlands 3 Release: <time>05/29/13</time></li>
            <li>E3 2013 Starting: <time>08/11/13</time></li>
            <li>Playstation 4 Release: <time>08/31/13</time></li>
            <li>Xbox 720 Release: <time>09/01/13</time></li>
        </ul>
    </div>

        <div id="side_trailer">
            <a href="video.html"><img src="TbGow.jpg" /></a>
        </div>

    <div id="side_advert">
        <img src="http://i.imgur.com/W65o9R2.jpg" alt="Blackberry's Z10" title="Blackberry's Z10" id="advert">
    </div>                     
</aside>

</div>

<footer id="footer">
    &copy; Copyright  by SimKessy
</footer>

CSS：

#topWrapper {
    /*border:1px solid #00ffff;*/
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    width:100%;
}
#topContainer {
    /*border:1px solid #00ff00;*/
    height:56px;
    width:784px;
    margin:0px auto;
    text-align:left;
    padding:0px 0px 0px 0px;
}
#wrapper{
    max-width: 850px;
    display: -moz-box;
    display: -webkit-box; /*means this is a box with children inside*/
    -moz-box-orient:vertical;
    -moz-box-flex:1;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
    background-color: #B137D6;
    margin: 0px auto;
    position: static;
}

Answer 1

您需要将'z-index'css属性添加到菜单中。菜单必须具有比包装器更大的z-index才能保持最佳状态。例如：

#menu {
z-index:2;
}

#wrapper {
z-index:1;
}

默认情况下，所有元素都有z-index:0;，因此如果您只在菜单中添加z-index:1;，那么您就是安全的。

添加z-index后，您需要为#body div提供上边距，如下所示：

#body_div{
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    display: -moz-box;
    -moz-box-orient:horizontal;
    color:#000000;
    margin-top:200px;

}

请参阅更新的jsfiddle：http://jsfiddle.net/qacaT/1/

Answer 2

请使用z-index属性

#topWrapper {
/*border:1px solid #00ffff;*/
background-color:#0d0d0d;
text-align:center;
position:fixed;
width:100%;
z-index:9999; /*like this*/
}

固定菜单，但正文覆盖菜单

2 个答案: