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

Question

我需要在已设置 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;
}

<div class="applet-container">
  <div class="applet">
      <div class="sticky-header">
        Sticky Header 
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </div>
      <div class="content">Content 1 that will be displayed over</div>
  </div>
    <div class="applet">
      <div class="sticky-header">Dropdown content should be displayed over this sticky header</div>
  </div>
</div>

Answer 1

您需要将 z-index 提供给 applet div。给第一个applet一个z-index: 9999，你会看到下拉菜单会在其他菜单

之上

Answer 2

删除所有 z-index（您不需要任何一个），只需将 z-index 设置为悬停时的粘性元素。

.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;*/
}

.sticky-header:hover {
  z-index: 1;
}

<div class="applet-container">
  <div class="applet">
    <div class="sticky-header">
      Sticky Header
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="content">Content 1 that will be displayed over</div>
  </div>
  <div class="applet">
    <div class="sticky-header">Dropdown content should be displayed over this sticky header</div>
  </div>
</div>

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

Display element over one with position: sticky

html

css

z-index

sticky