Box-shadow over next sibling div

Question

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;
}

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.

Like this http://jsfiddle.net/j08691/2u4Lvyn0/4/? – j08691 Jul 07 '15 at 18:37 — j08691, Jul 07 '15 at 18:37

score 40 · Accepted Answer · answered Jul 07 '15 at 18:44

40

Adding position:relative; will fix it. Though, it may affect other CSS tweaks you already have.

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

answered Jul 07 '15 at 18:44

KidBilly

3,408
1
26
40

Also, I needed to change my z-index to get the right results. – Arthur Costa Apr 25 '19 at 06:06
4

Can you add an explanation why this answer will fix the issue? – Dominik Murzynowski Aug 13 '20 at 11:48
2

An element with `relative` position creates a new stacking context. You can then use `z-index` to control the stack level. – steinybot Jul 29 '21 at 19:46

score 2 · Answer 2 · answered Sep 10 '22 at 18:58

2

Purest way to create a new stacking context would be to use css property isolation: isolate;

https://jsfiddle.net/mgfyz1j9/2/

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

answered Sep 10 '22 at 18:58

Malolan

53
5

Box-shadow over next sibling div

2 Answers2

Linked