Why is box-shadow hidden by another div?

Question

I am trying to add a box-shadow on top of another div, but it gets clipped. Why and how do I fix it?

HTML:

<div id="top">
    <div id="box">

    </div>
    <div id="banner">

    </div>
</div>

CSS:

#box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
}

#banner{
    height:40px;
    background-color:orange;
}

JSFiddle: http://jsfiddle.net/rQNg9/

The result should have the shadow on top of the next div.

(I am running Chrome 28 on Windows 7)

Answer 1

*{
    padding:0px;
    margin:0px;
    }
    #box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
                position:relative;
                z-index:100;
}`enter code here`

Answer 2

I hope i understood your question correctly.

Example

You need to have

position:relative;

for the

z-index:1;

to work properly.

I've also changed the

box-shadow: 8px 32px 3px rgba(30, 76, 80, 1) , 
            0px -2px 3px rgba(240, 21, 21, 1), 
            2px 0px 3px rgba(38, 238, 0, 1),
            -2px 0px 3px rgba(158, 29, 243, 1);

in order for the shadow to fall on the other div

Answer 3

The order of the DOMs has naturally has #banner "above" the box so you can add:

position: relative;
z-index: 1;

to #box and it'll work as: http://jsfiddle.net/rQNg9/1/

Answer 4

Try adding position: relative; to #box