CSS : 왜 배경색이 상자 그림자를 끊거나 없앨까요?

Question

나는 아주 간단 사업부 구조를 가지고 - 중간 상자 나무 상자 박스 그림자와 하이라이트 :

<div class="offerBox"> 
    <div class="obOffer"> 
    <div class="obOfferTitle">Free</div>  
    <div class="obOfferPrice">Free</div>  
    </div> 
    <div class="obOffer obHiLight"> 
    <div class="obOfferTitle">Title</div>  
    <div class="obOfferPrice">$10</div>  
    </div> 
    <div class="obOffer"> 
    <div class="obOfferTitle">Title 2</div>  
    <div class="obOfferPrice">$10</div>  
    </div> 
</div>​ 

CSS : 요소의

.offerBox {  
    width: 300px; 
    margin:10px;  
} 
.obOffer { 
    width: 33%; 
    float: left; 
    height: 100px; 
    text-align:center; 
} 

.obOfferPrice { 
    padding: 10px; 
    color: white; 
    background-color: #85AADD; 
} 

.obHiLight { 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
} 

한 그 상자가 내부 배경색 속성 집합. 몇 가지 이유로이 배경색은 상자 그림자를 오른쪽에서 제거하고 오른쪽에서만 제거합니다.

아이디어를 수정하는 이유는 무엇입니까? 문제의

라이브 예 : http://jsfiddle.net/SqvUd/

Answer 1

당신은 단지 Z- 인덱스 위치에 추가해야

: 상대적; 예제를 참조하십시오. http://jsfiddle.net/SqvUd/2/

Answer 2

항목의 Z- 색인과 관련이 있습니다. 이것을 기존 CSS에 추가해보십시오 :

.obOffer { 
    position: relative; 
    z-index: 10; 
} 

.obHiLight { 
    position:relative; 
    z-index: 100; 
}​