小编gre*_*gid的帖子

将元素显示在一个位置上:粘性

我需要在已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)

html css z-index sticky

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

sticky ×1

z-index ×1