2015-07-07 3 views
7

У меня есть тень теней на div, которую я хочу вычеркнуть как панель над следующим div на странице, но когда следующий div имеет фоновое или фоновое изображение, t появляется. есть ли способ тени, показывающий следующий элемент, даже если они являются «позицией: начальная»; http://jsfiddle.net/2u4Lvyn0/2/ поэтому тень следует упускать из виду синюю коробку под егоBox-shadow over next sibling div

HMTL

<div class="background-image-div"></div> 
<div class="box-shadow-div"></div> 
<div class="background-image-div"></div> 

CSS

.box-shadow-div{ 
    height:100px; 
    background:orange; 
    -webkit-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); 
    -moz-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); 
    box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); 
} 

.background-image-div{ 
    height:100px; 
    background:blue; 
    border:1px solid yellow; 
} 

Я видел много постов на «врезке коробчатого тень» не работает с его собственным фоновым изображением divs, но не мог найти ничего о просто регулярных div div.

+1

Как это http://jsfiddle.net/j08691/2u4Lvyn0/4/? – j08691

ответ

8

Добавление position:relative; исправит это. Хотя это может повлиять на другие настройки CSS, которые у вас уже есть.

http://jsfiddle.net/2u4Lvyn0/5/

+1

это действительно решает его в моем случае. благодаря – MintWelsh