Question

我有一个非常简单的div结构 - 带有中间框的树框用框阴影突出显示：

<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-index和position：relative;看到这个例子。 http://jsfiddle.net/SqvUd/2/

Answer 2

它与项目的z-index有关。尝试将此添加到现有的css：

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

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

Answer 3

添加.obHiLight{opacity:0.999}会为该元素创建一个新的堆叠上下文，使其也显示在其他元素之上。这也可能适用于表（未测试：）。 @ItJustWerks @ brian-tacker

CSS：为什么背景色会打破/删除盒子阴影？

3 个答案: