html - 相邻 float 框的框阴影被切断

Question

float div 的框阴影被其右侧的邻居截断，但左侧未截断。

我玩过 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;
}

结果:

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

Answer 1

z-index 仍然是答案，但您只能将 z-index 应用于具有 position:relative 或 position:absolute。

因此，将 position:relative 应用于所有元素，然后将 z-index 应用于事件元素。