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

Question

我创建了自定义下拉菜单，其中一个 <div> 保存当前值并充当 <select> 字段，另一个在其下方，当点击顶部时显示，保存所有 <option> 值.

该设计要求底部<div> 稍微低于上面的位置（奇怪的圆角等），所以我使用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>

Answer 2

我不是 100% 确定你的意思，但如果我没记错的话，解决方案应该是包装 .major 和 .minor div，这样它们就不会相互重叠，如下所示：

<div class="dropdown">
  <div class="major">
  First one fine
  </div>
  <div class="minor">
  Option part goes here
  Option part goes here
  Option part goes here
  </div>
</div>

查看我的 JSFiddle 分支：https://jsfiddle.net/jk1dn4yx/