在不使用 z-index 的情况下在另一个之上显示 div
Displaying a div on top of another without using z-index
我创建了自定义下拉菜单,其中一个 <div>
保存当前值并充当 <select>
字段,另一个在其下方,当点击顶部的菜单时显示,保存所有 <option>
值。
该设计要求底部 <div>
的位置略低于上部(奇怪的圆角等),因此我使用 z-index
来实现这一点。这一切都有效,直到我有两个彼此靠近的下拉菜单。如果您单击上面的一个,则会显示下拉选项列表,但它也位于第二个下拉菜单下方,这是非常不受欢迎的。这是 jsfiddle 中的简化版本:
jsFiddle
如您所见,第一个下拉菜单很好,但第二个下拉菜单隐藏在第三个下拉菜单下方。任何想法我怎样才能做到这一点,所以第二个菜单也能正常工作?可能以某种方式不使用 z-index?
我不是 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/
首先,将每个菜单包装在一个元素中。我用了 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>
我创建了自定义下拉菜单,其中一个 <div>
保存当前值并充当 <select>
字段,另一个在其下方,当点击顶部的菜单时显示,保存所有 <option>
值。
该设计要求底部 <div>
的位置略低于上部(奇怪的圆角等),因此我使用 z-index
来实现这一点。这一切都有效,直到我有两个彼此靠近的下拉菜单。如果您单击上面的一个,则会显示下拉选项列表,但它也位于第二个下拉菜单下方,这是非常不受欢迎的。这是 jsfiddle 中的简化版本:
jsFiddle
如您所见,第一个下拉菜单很好,但第二个下拉菜单隐藏在第三个下拉菜单下方。任何想法我怎样才能做到这一点,所以第二个菜单也能正常工作?可能以某种方式不使用 z-index?
我不是 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/
首先,将每个菜单包装在一个元素中。我用了 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>