Box-shadow being cut off for floating boxes next to each other

Question

The box-shadow of a floating div is cut off by it's right neighbour, but not on the left side.

I played with z-index and overflow: visible but it did not work.

HTML:

<div class="doc-page"></div>
<div class="doc-page active"></div>
<div class="doc-page"></div>

CSS:

.doc-page {
    float: left;
    width: 141px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
}
.active {
    box-shadow: 0 0 5px 5px #888;
}

Result:

Fiddle: http://jsfiddle.net/au5Lv/1/

Answer 1

z-index is still the answer, but you can only apply z-index on an element with position:relative, or position:absolute.

So apply position:relative to all of your elements, and then apply the z-index to the active one.

Answer 2

SOLVED:

Fiddle: http://jsfiddle.net/aniruddha153/HKj9P/

HTML:

<div class="doc-page"></div>
<div class="doc-page active"></div>
<div class="doc-page"></div>

CSS:

.doc-page {
    float: left;
    width: 141px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
    position:relative;
    z-index:0;
}
.active {
    position:relative;
    z-index:9999;
    box-shadow: 0 0 5px 5px #888;
}

Answer 3

you need to add z-index value; When using z-index value position have to defined as well.

.active {
    box-shadow: 0 0 5px 5px #888;
  z-index:1;
  position:relative;
}

Here is working Demo http://jsbin.com/keyilono/1/