隠し要素を他の要素の上に表示

Question

デフォルトのオプションタグをスタイルできないため、自分自身のドロップダウンリストを作成しましたが、ドロップダウンリストが表示されたら他の要素を下に移動します。元のセレクトのように他のものの上に表示したい。

どうすればこの問題を解決できますか？私はposition: relative;とz-index:100;を設定しようとしましたが、結果はありません。

がフィドルを参照してください：https://jsfiddle.net/vaxobasilidze/Lcztc8gc/

$('body').on('click touchend', '#typeSelect', function() { 
 
    $('#typeDropDownList').css({ 
 
    'display': 'list-item' 
 
    }); 
 
}); 
 

 
$('body').on('click touchend', '#typeDropDownList li', function() { 
 
    var value = $(this).text(); 
 
    $('#typeSelect').text(value); 
 
    $('#typeDropDownList').toggle(); 
 
});

#typeSelect { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
    background-repeat: repeat; 
 
    background-position: 300px; 
 
    width: 353px; 
 
    padding: 5px; 
 
    line-height: 1; 
 
    border-radius: 4px; 
 
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); 
 
    -webkit-appearance: none; 
 
    outline: none; 
 
    color: #b8c0c8; 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 

 
#typeSelect li { 
 
    width: 100%; 
 
} 
 

 
#typeDropDownList { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    -webkit-appearance: none; 
 
    outline: none; 
 
    color: #b8c0c8; 
 
    width: 100%; 
 
    border-radius: 3px; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); 
 
    display: none; 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 

 
#typeDropDownList li { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    border-top: 1px solid rgba(0, 0, 0, 0.7); 
 
    background-repeat: repeat; 
 
    background-position: 300px; 
 
    padding: 5px; 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 

 
#typeDropDownList li:first-child { 
 
    border-top: none; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
} 
 

 
#typeDropDownList li:last-child { 
 
    border-bottom-left-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="settingsDiv"> 
 
    <table style="width: 100%;"> 
 
     <tr> 
 
      <th colspan="2">Adapter 0</th> 
 
     </tr> 
 
     <tr> 
 
      <td class="adapterInput" colspan="2" style="text-align: center;"> 
 
       <ul id="typeSelect"> 
 
        <li>--- Choose type ---</li> 
 
       </ul> 
 
       <ul id="typeDropDownList"> 
 
        <li>--- Choose type ---</li> 
 
        <li>DVB-S</li> 
 
        <li>DVB-S2</li> 
 
        <li>DVB-T</li> 
 
        <li>DVB-T2</li> 
 
        <li>DVB-C</li> 
 
       </ul> 
 
      </td> 
 
     </tr> 
 
     <table id="adapterInputContainer"> 
 
      <tr> 
 
       <td>Frequency:</td> 
 
       <td class="adapterInput"> 
 
        <select> 
 
         <option value="S">DVB-S</option> 
 
         <option value="S2">DVB-S2</option> 
 
         <option value="T">DVB-T</option> 
 
         <option value="T2">DVB-T2</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Inversion:</td> 
 
       <td class="adapterInput"> 
 
        <select> 
 
         <option value="AUTO">AUTO</option> 
 
         <option value="ON">ON</option> 
 
         <option value="OFF">OFF</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Voltage:</td> 
 
       <td class="adapterInput"> 
 
        <select> 
 
         <option value="13">13</option> 
 
         <option value="18">18</option> 
 
         <option value="OFF">OFF</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td class="adapterInput"> 
 
        <input type="submit" style="float: right;"> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </table> 
 
</div>

Answer 1

#typeDropDownList { 
    margin: 0; 
    padding: 0; 
    line-height: 1; 
    -webkit-appearance: none; 
    outline: none; 
    color: #b8c0c8; 
    width: 100%; 
    border-radius: 3px; 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); 
    display: none; 
    position: absolute /*relative*/ ; 
    z-index: 100; 
    background: #fff; /* or any other color */ 
} 

Answer 2

変更絶対に位置し、あなたのdivの背景色を与えるが、背景には、カスタムドロップダウンの下にコンテンツを参照してください理由です透明です

#typeDropDownList { 
    margin: 0; 
    padding: 0; 
    line-height:1; 
    /*box-shadow: 1px 1px 1px rgba(255,255,255,0.1);*/ 
    -webkit-appearance:none; 
    outline:none; 
    color: #b8c0c8; 
    width: 100%; 
    border-radius: 3px; 
    box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
    display: none; 
    position: absolute;//change this 
    z-index: 100; 
    background:##f3f5f6;//add this 
} 

demo

Answer 3

typeDropDownListの位置をabsoluteに設定してみてください。 また、表示の問題を避けるために背景色を追加してください。