JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topbar"></div>
<div id="top_blur">img</div>
<div class="header">content here</div>

CSS

#topbar {
width:100%;
height:42px;
margin:0;
padding:0;
background: #0066cc; 
/* make top bar stick to the top of browser */
position:fixed;
z-index:800;
/*Making sure it sticks to left of window in IE7*/
top:0;
left:0;
float:left;
-webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
position:absolute; /* if I remove this it sticks but still same other problems */
}

#top_blur {
width:300px;
margin:0 auto;
height:70px;
z-index:1;
background-color: red;
background-repeat: no-repeat;
position:relative;
}

.header {
width:300px;
margin:0 auto;
position: relative;
top: -60px;
z-index: 801;
}