CSS Box shadow disappears

Question

I am trying to implement effect number 2 as seen at the following site: http://cssdeck.com/labs/different-css3-box-shadows-effects

So far, I am able to do this porperly, but when I add any more html content to the page, the effect disappears. Here is a sample fiddle with what I have so far: http://jsfiddle.net/aHrB7/

Part of the HTML:

<div class="header">
    <img id="imgLogo" src="http://iconpacks.mozdev.org/images/firefox2005-icon.png" width=30px height=20px  /> 

    <div class="divContentSizer">
   <span class="spnName">Master Chief</span> <!-- End spnName -->
</div> 

<div class="clearfix"></div> <!-- End clearfix -->
  </div>

Here is the CSS I am using for that:

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   content: "";
   line-height: 0;
}

.clearfix:after {
   clear: both;
}

.header {
   position: relative;
   width: 100%;
   background: #fff;
   padding-top: 10px;
   padding-bottom: 10px;
}

.header:before, .header:after {
   z-index:-1;
   position: absolute;
   display:table;
   content: "";
   top:30px;
   left: 10px;
   width: 50%; 
   padding: .3em .3em;
   max-width:300px;
   background: rgba(0, 0, 0, 0.2); 
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.2);   
   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.header:after  {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

#imgLogo {
float: left;
padding-left:30px;
}

.divContentSizer {
text-align: center;
vertical-align: middle;
width: 960px;
margin: 0 auto;
}

.spnName {
padding-top: 3px;
font-size: 1.5em;
color: #273137;
}

The header class div is what I am trying to have the box shadows show up for and I have commented what part to delete to see the effect show up again.

Does anyone know why this happens and what I can do to fix it? Any insight would be helpful! Please and thank you!

Answer 1

Set a z-index to your container, that seems to fix the problem

.container{
    z-index:0;
    position: relative;
}