CSS：爲什麼背景顏色打破/刪除箱子陰影？

我有一個很簡單的div結構 - 與中間的方框樹盒與突出的box-shadow：CSS：爲什麼背景顏色打破/刪除箱子陰影？

<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/

來源

2012-05-14 Okapy

你只需要添加的z-index和位置：相對的;看到這個例子。 http://jsfiddle.net/SqvUd/2/

來源

2012-05-14 17:01:31

謝謝，我試過z-index，但沒有想過有關position：relative;它確實解決了這個問題。 – Okapy

這是一個愉快的:) –

使用'position：relative;'解決了這個問題！非常感謝，它試圖解決這個問題讓我瘋狂。 –

它與項目的z-index有關。嘗試添加到您現有的CSS：

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

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

來源

2012-05-14 17:03:04 JamesOR

CSS：爲什麼背景顏色打破/刪除箱子陰影？

回答

相關問題