Selectviewu小部件出现在listview后面

Question

当我按下我的selectmenu小部件时，下拉列表显示在我的列表视图后面，该列表视图位于选择项下方。

HTML：

<div data-role="page" id="index">
    <div data-role="header" class="header" data-position="fixed" role="banner"> 
        <h1>Testapp</h1>
    </div><!-- /header --> 
    <div id="main-container" data-role="content"> 
        <select name="number-selector" id="number-selector">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
     <ul data-role="listview" data-inset="false" id="list1"> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
    </ul>
  </div>
</div>

CSS：

#list1{
    position:relative;
    width:280px;
    padding:0;
    background:#FFFFFF;
    padding-top: 14px;
    padding-bottom: 80px;
}
#main-container {
    background:#FFFFFF;
    overflow:auto;
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    height:100%;

}

我还没有选择菜单的CSS。

我希望下拉列表显示在listview下方的listview前面。但是，在这一点上，我看不到它，因为它似乎出现在它背后。我猜其他ID的CSS属性有些东西，但我无法看到。