0

我试图在这个网站上制作一个固定菜单：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;
}
4

2 回答 2

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/

于 2013-02-15T02:52:39.930 回答
-1

请使用 z-index 属性

#topWrapper {
/*border:1px solid #00ffff;*/
background-color:#0d0d0d;
text-align:center;
position:fixed;
width:100%;
z-index:9999; /*like this*/
}
于 2013-02-15T02:52:52.910 回答