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

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（你不需要它们中的任何一个）并简单地设置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>