盒子阴影被切断为彼此相邻的浮动盒子

Question

浮动div的盒子阴影被它的右邻居切断，但不在左侧。

我玩z-index和overflow：可见但是没有用。

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

结果：

小提琴：http://jsfiddle.net/au5Lv/1/

Answer 1

z-index仍然是答案，但您只能对z-index或position:relative的元素应用position:absolute。

然后将position:relative应用于您的所有元素，然后将z-index应用于活动元素。

Answer 2

解决：

小提琴：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

您需要添加z-index值;当使用z-index值position时也必须定义。

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

这是工作演示http://jsbin.com/keyilono/1/