html - 如果 float div 具有背景 css 属性，为什么不在 float div 的左侧显示框阴影

Question

我有以下简单标记:

HTML

<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 的右侧 - 请参阅 fiddle - 将鼠标悬停在第二个 div 上查看。为什么不显示？

Answer 1

后面的 float 位于前面的 float “上方”(参见 spec，其中说“在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后向前堆叠。”)。这导致右侧的 float 在悬停时会遮挡左侧 float 的框阴影的右侧。

一个简单的解决方法是使 div 仅在悬停时定位:

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

这确保了 it and its box shadow will be painted on top of any surrounding floating divs .