CSS Box тень исчезает

Question

Я пытаюсь реализовать эффект № 2, как показано на следующем сайте: http://cssdeck.com/labs/different-css3-box-shadows-effects

До сих пор я в состоянии сделать это porperly, но когда я добавляю больше HTML контента на странице, эффект исчезает. Вот пример скрипку с тем, что я до сих пор: 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

Насколько я понимаю, это потому, что .header не создает свой собственный stacking context (поскольку его г-индекс auto), поэтому z-index: 1 для псевдоэлементов, которые делают тень, означает, что они сложены позади body. Если .header является единственным содержанием body, body просто высок как .header и не скрывает тени полностью, но когда он становится выше, он делает это.

Чтобы предотвратить скрытие тени со своего фона, вы можете сделать следующий трюк: сделать свой фон прозрачным и установить основной фон только в корневой элемент.

html { 
    background: #f9f8f8; 
} 

body { 
    background: transparent; 
} 

В результате вы можете увидеть in this fiddle.

Answer 2

Установите г-индекс вашего контейнера, который, кажется, решить эту проблему

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