CSS Layered Background Trick

by darcyclarke

HTML

<div class="wrapper">
    <div class="nav">
        <div class="item"></div>
    </div>

    <div class="content"></div>
        <div style="clear:both"></div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;  
}
div {
    display: block;    
}
html {
 background: #efefef;   
}
body {
 background: #666;
 margin: 300px 0 0 0; 
width: 100%;
   height: 300px; 
}
.wrapper {
 width: 90%;
 margin: -300px auto 0;  
 border: 1px solid #000;
}
.nav {
    height: 50px;
    width: 100%;
    margin: 0 auto;
    background: green;
    position: relative;
    z-index: 999;
}
.content {
 height: 400px;
 width: 100%;
 margin: 10px auto;
 background: yellow;   
  position: relative;
    z-index: 2;
}

.item {
 position absolute;
 width: 50px;
 height: 600px;
 background: blue; 
}