我從Materialise添加了一些下拉菜單，但我在將它們放在其他元素后面時遇到問題（附圖）。我嘗試更改選項 ( z-index: 100;) 的 z 索引和其他 div 的 z 索引 ( z-index: -1;)。HTML：                      <div class="column source">                          <label for="source1">Source of Income</label>                          <select class="validate dark" id="source1" value="<?= income1Data[1] ?>" onchange="getHeader1();" required>                            <option disabled><?= income1Data[1] ?></option>                            <option>Employment</option>                            <option>Unemployment</option>                            <option>Social Security</option>                            <option>Retirement</option>                            <option>Side Job</option>                            <option>Benefits</option>                            <option>Bonus</option>                            <option>Other</option>                          </select>                      </div>           <div class="table-body x18" id="bill-table">             <hr />             <div class="table-row x20">               <h3 class="title">Bills and Debt</h3>             </div>           </div>JavaScript：  document.addEventListener('DOMContentLoaded', function() {    var elements = document.querySelectorAll('select');    var instances = M.FormSelect.init(elements);};CSS：#bill-table {  z-index:-1;}ul.dropdown-content.select-dropdown li span {    z-index:100; //I used "color: red" to test and the color works, but z-index doesn't bring to front}