悬停Div上的阴影Div over others Divs

I have few divs like that:

我有几个这样的div：

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

and css:

和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
}

as you can see I want to make div drop shadow when hover over it. But everytime when I hover over div, dropshadow is under another div. Can you help me fix it?

正如你所看到的，当我将鼠标悬停在它上面时，我想制作div阴影。但每次当我将鼠标悬停在div上时，其他div就会出现问题。你能帮我解决一下吗？

This is how it's look like when over over last div:

这是超过最后一个div时的样子：

1 个解决方案

#1

The z-index property works only on relative, absolute or fixed positioned elements.

z-index属性仅适用于相对，绝对或固定定位元素。

Add this to your stylesheet:

将其添加到样式表：

.tab {
  position:relative;
}

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

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