Box-shadow 因相邻的浮动框而被截断

Question

浮动 div 的 box-shadow 被它的右侧邻居切断，但不在左侧。

我玩过 z-index 和 overflow: visible 但它不起作用。

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活动元素。