jquery - 在同一容器中的另一个 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;
}