下一个兄弟div的框阴影 [英] Box-shadow over next sibling div
问题描述
我在div上有一个框阴影,我想像条形图一样突出显示在页面上的下一个div上,但是当下一个div具有背景或背景图片时,它不会显示.即使它们都是"position:initial;",有没有办法在下一个元素上显示阴影? http://jsfiddle.net/2u4Lvyn0/2/因此阴影应忽略其下方的蓝色框
I have a box shadow on a div that i want to stick out like a bar over the next div on the page, but when the next div has a background or background image, it won't show up. is there a way of the shadow showing over the next element even though they are both "position:initial;" http://jsfiddle.net/2u4Lvyn0/2/ so the shadow should overlook the blue box below it
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;
}
我已经看到很多关于插入框阴影"的帖子都无法使用其自身的div背景图片,但是找不到有关常规兄弟div的任何内容.
I've seen a lot of posts on 'inset box-shadow' not working with it's own divs background image but couldn't find anything about just regular sibling divs.
推荐答案
添加 position:relative;
将对其进行修复.不过,这可能会影响您已经进行的其他CSS调整.
Adding position:relative;
will fix it. Though, it may affect other CSS tweaks you already have.
http://jsfiddle.net/2u4Lvyn0/5/
这篇关于下一个兄弟div的框阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!