我需要在已position: sticky
设置的元素上显示下拉内容。不幸的是,操纵并z-index
没有多大帮助。悬停时显示的内容仍被下一个粘性元素覆盖。
展示多个小程序问题的完整示例:https://jsfiddle.net/tfkh2v0n/3/
最小的例子:
.applet-container {
position: relative;
z-index: 1;
}
.applet {
position: relative;
z-index: 2;
}
.sticky-header {
top: 0px;
position: sticky;
background: #d1d1d1;
z-index: 3;
}
.dropbtn {
background-color: #4CAF50;
color: white;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: gold;
min-width: 160px;
z-index: 5;
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 5;
}
Run Code Online (Sandbox Code Playgroud)
<div class="applet-container">
<div …
Run Code Online (Sandbox Code Playgroud)