javascript - 在其他元素之上显示隐藏元素

Question

我已经创建了自己的下拉列表，因为我无法设置默认选项标签的样式，但我的下拉列表在出现时会将其他元素向下移动。我希望它显示在其他选项之上，就像原来的选择一样。

我怎样才能做到这一点？我已经尝试设置 position: relative; 和 z-index:100;，但没有结果。

参见 fiddle :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 */
}