Question

我在Materialize中添加了一些下拉菜单，但在其他元素后面却遇到了问题（已附加图片）。我尝试更改选项（z-index: 100;）的z索引和其他div（z-index: -1;）的z索引。

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
}

Answer 1

我认为您可能在这里遇到的问题是由于z-index仅适用于定位的元素，例如https://www.w3schools.com/cssref/pr_class_position.asp

我在这里做了一个小提琴来解释它：https://jsfiddle.net/LukeUK/ptym15qx/10/ 希望这可以帮助！：）

CSS

.pink-square {
  position: absolute;
  z-index: 1;
  background: pink;
  height: 300px;
  width: 300px;
}

.blue-square {
  position: absolute;
  top: 100px;
  left: 100px;
  background: blue;
  height: 300px;
  width: 300px;
}

HTML

<div class="pink-square"></div>
<div class="blue-square"></div>

Answer 2

如果没有放置元素，

z-index属性不会产生任何效果，请根据您的用例为每个集团添加一个position属性

实现下拉菜单隐藏在其他元素后面

2 个答案: