如果有背景css属性，为什么不在浮动div的左侧不显示方框阴影？

Question

我有以下简单的标记：

<div>1</div>
<div>2</div>
<div>3</div>

CSS

div {
    float:left;
    padding: 20px;
    height: 58px;
    width: 100px;
    background-color: #A6BFE1;
    font: 14px/42px Open Sans;
    color: #FFF;
}

div:hover {
    box-shadow: 0 0 7px rgba(0, 0, 0, .25);
}

但是，当悬停时，框影不会显示在div的右侧--请看到小提琴 -悬停在第2 div上方。为什么没显示出来？

Answer 1

稍后的浮动被定位为“高于”早期的浮动(请参见等级库，其中表示“在堆叠上下文中具有相同堆栈级别的框按照文档树顺序从后向前堆叠”)。这导致右侧的浮点数在悬浮时模糊了左侧浮动框阴影的右侧。

解决这一问题的一个简单方法是，只在悬浮时才使div被定位：

div:hover {
    position: relative;
    box-shadow: 0 0 7px rgba(0, 0, 0, .25);
}

这确保了它和它的盒子阴影将被画在任何周围浮动的div之上。。

Answer 2

这是因为右阴影在其他div的下方。使用一些z-index将显示右侧阴影：http://jsfiddle.net/9WW5f/1/