悬停Div上的阴影Div over others Divs

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属性仅适用于相对，绝对或已修复定位元素。

将其添加到样式表中：

.tab {
  position:relative;
}

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