Question

Im trying to make a fixed menu like on this site: http://www.thethingswemake.co.uk/web_carsonified.htm

The menu is fixed like I want it too but the main wrapper is going ontop instead of below the menu: this is what I have 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

You need to add ‘z-index’ css property to the menu. Menu has to have bigger z-index than wrapper in order to stay on top. example:

#menu {
z-index:2;
}

#wrapper {
z-index:1;
}

by default all elements have z-index:0; so if you only add z-index:1; to the menu you’re safe.

after adding z-index you need to give top margin to #body div like this:

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

}

see updated jsfiddle: http://jsfiddle.net/qacaT/1/