javascript - 无法将下拉列表置于其他正文元素之上

Question

正如您在下面看到的，下拉菜单并未位于其他正文元素(例如计时器)之上。我使用 bootstrap 作为下拉菜单，使用 redcountdown js 作为计时器。

HTML:

<div class="col-md-6 m-t-15" style="border-left:1px solid #fff;"><center>
    <h3 class="material-animate">
    <select class="selectpicker" data-live-search="true" data-width="200px" id="d_d" style="text-align:center"><option><center>Select</center></option></select>
    Delegate Time</h3>
    <div id="delegate_time" class="redCountdownDemo material-animate"></div>
    <div class="row">
        <div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="DD" id="dtd"></div>
        <div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="HH" id="dth"></div>
        <div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="MM" id="dtm"></div>
        <div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="SS" id="dts"></div>
    </div><br>
    <span class="btn btn-success material-animate" id="d_update"><i class="fa fa-clock-o"></i> Update</span>
    <span class="btn btn-danger material-animate" id="d_reset"><i class="fa fa-refresh"></i> Reset</span>
    <div class="checkboxer form-inline">
        <input type="checkbox" value="" id="mspeak">
        <label for="mspeak">MSpeak</label>
    </div>
</center></div>

我尝试解决所有元素的位置和 z-index，但没有任何效果。因此，我已将所有 CSS 修改重置为初始状态。

请帮助我将下拉菜单置于主体的所有其他元素之上。

完整代码，请访问:https://github.com/lightofindia1/DiPSMUN-Moderator-App

Answer 1

将这两种样式添加到您的 css 文件(可能是 elements.css 的底部)或您想要覆盖以前的样式的地方:

.display-animation .material-animate {
    z-index: 1;
    position: relative;
}

.display-animation h3.material-animate {
    z-index: 2 !important;
}

你会实现你想要的!