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

Question

如下所示，下拉菜单未定位在其他正文元素（如计时器）上。我正在使用bootstrap for dropdown和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;
}

你会实现你想要的！