在其他人之上显示隐藏的元素

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

尝试为absolute设置位置为typeDropDownList。还要添加背景颜色以避免可见性问题。