html - CSS Box 阴影消失

Question

我正在尝试实现效果编号 2，如以下站点所示:http://cssdeck.com/labs/different-css3-box-shadows-effects

到目前为止，我可以很好地做到这一点，但是当我向页面添加更多 html 内容时，效果就会消失。这是我目前所拥有的示例 fiddle :http://jsfiddle.net/aHrB7/

部分 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>

这是我为此使用的 CSS:

.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;
}

标题类 div 是我试图让框阴影显示的内容，我已经评论了要删除的部分以再次显示效果。

有谁知道为什么会发生这种情况以及我可以做些什么来解决它？任何见解都会有所帮助!请谢谢!

Answer 1

为您的容器设置一个 z-index，这似乎可以解决问题

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