jquery - 同じコンテナ内の別のdivの上にzインデックス付きの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;
}