在同一容器中的另一个div上显示z-indexed div

Question

我有一个包含表格的容器div。我使用jQuery动态地将div添加到容器div。我想将创建的div放在表上但不能这样做。子div显示在表格下方。这是我的代码

HTML：

<div class="container">
  <table class="tbl">
    <tr><td></td></tr>
    <tr><td></td></tr>
  </table>    
</div>    
<button id="btnAdd" type="button">Add</button>

CSS：

.container
{
  position:relative;
  background-color:#d0d0d0;
  width:90%;
  height:50px;
}
.innerdiv
{
  z-index:2;
  background-color: #D57657;
  float:left;    
}
.tbl
{
  border-collapse: collapse;
  width:100%;
  height:100%;
}
.tbl td
{
  border-bottom:1px solid #000;
}

jQuery的：

$(function(){
  $("#btnAdd").click(function(){
    $(".container").append("<div class='innerdiv'>I am new</div>");
  });
});

这是jsFiddle

Answer 1

.container{
    position:releative;
    background-color:#d0d0d0;
    widht:90%;
    height:50px;
    float: left;
}