桌面边框显示在div下面

Question

我有一张表格，里面有一个div。 div被叠加在几个表格单元的顶部（按设计）。但是边界仍然可以通过div看到，尽管div根本不透明。这是它的样子：

为什么通过div可以看到边框？如何防止边界通过div显示，并使div完全透明？

这里有一个jsfiddle来展示它，这里是我的HTML和CSS：

HTML：

<table class="mytable">
<tr>
    <td>
         <div style='height:64px' class='mydiv'>

        </div>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
<tr>
    <td>
    </td>
</tr>
</table>

CSS ：

.mytable tr:nth-child(4n + 2) {
    background-color: #9f9f9f;
}

.mytable th {
    font-size: 10px;
    height: 25px;
    font-family: arial, tahoma;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
    border-width: 1px;
    border-color: #000000;
    border-style: solid;
    padding: 0px;
}

.mytable td {
    height: 8px;
    width: 80px;
    border-bottom-style: dashed;
    border-right-style: solid;
    border-bottom-color: #666666;
    border-right-color: #666666;
    border-width: 1px;
    padding: 0px;
    margin-right: 1px;
    position: relative;
}

.mydiv {
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
    font-family: tahoma, arial;
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: inherit;
}

Answer 1

只需将z-index: 1;提交给.mydiv

即可

演示：http://jsfiddle.net/ffjpnv3b/4/