悬停 Div 时在其他 Div 上投下阴影

Question

我很少div这样的：

<div class="tab">
   <h2>Text</h2>
</div>
<div class="tab">
   <h2>Text</h2>
</div>
<div class="tab">
   <h2>Text</h2>
</div>

和css:

.tab {
    background: #ffffff;
    width: 100%;
    height: 50px;
    border-color: #B6B6B6;
    border-top: solid 1px #B6B6B6;
    transition: 0.3s;
    line-height: 12px;
}
.tab:hover {
    background: #EEEEEE;
    transition: 0.3;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index:1000
}

如您所见，我想 div 将鼠标悬停在它上面时投影。但每次当我将鼠标悬停在 div 上时，阴影都在另一个 div 下方。你能帮我修一下吗？

这是上次结束时的样子 div:

Answer 1

z-index 属性仅适用于 relative、absolute 或 fixed定位元素。

将此添加到您的样式表中：

.tab {
  position:relative;
}

http://jsfiddle.net/sebnukem/wp3ryLh8/4/

悬停 Div 时在其他 Div 上投下阴影

Drop shadow on hover Div over others Divs

html

css