html - 在不使用 z-index 的情况下在另一个之上显示一个 div

Question

我创建了自定义下拉菜单，其中有一个 <div>保持当前值并充当 <select>字段和它下面的另一个在单击顶部时显示，包含所有 <option>值(value)观。

设计要求底<div>位置略低于上一个(奇怪的圆 Angular 等)，所以我使用了 z-index实现这一目标。这一切都有效，直到我有两个彼此靠近的下拉菜单。如果您单击上面的一个，则会显示下拉选项列表，但它也位于第二个下拉菜单下方，这是非常不受欢迎的。这是 jsfiddle 中的简化版本: jsFiddle

如您所见，第一个下拉菜单很好，但第二个下拉菜单隐藏在第三个下拉菜单下方。任何想法我怎样才能做到这一点，所以第二个菜单也能正常工作？可能以某种方式不使用 z-index？

Answer 1

首先，将每个菜单包装在一个元素中。我使用了 div.container。

由于一次只能打开一个菜单，只需更改 .major 和 .minor 的 z-index每个容器中的元素(在我的示例中悬停)正常工作:

.major {
  position: relative;
  width: 100px;
  background-color: red;
  z-index: 1;
}
.minor {
  position: absolute;
  width: 150px;
  background-color: blue;
  padding-top: 10px;
  margin-top: -10px;
  z-index: 0;
  display: none;
}
.container:hover .major {
  z-index: 5;
}
.container:hover .minor {
  display: block;
  z-index: 4;
}
.moveup {
  margin-top: -25px;
}

<div class="container">
  <div class="major">
    First one fine
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
  <div class="major">
    Second menu
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>
<div class="container">
  <div class="major">
    Third menu
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>