使用 position: sticky 的元素如何覆盖其他元素？

Question

我需要在设置了position: sticky的元素上方显示下拉内容。不幸的是，使用z-index进行操作并没有帮助。鼠标悬停时显示的内容仍然被后面的sticky元素覆盖。

具有多个applets的完整示例呈现了问题：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>

- gregid

---

请将您的代码放在问题中。 - Temani Afif

即使像 jsfiddle 示例中那样长度很长，您也只需返回已翻译的文本。 - gregid

是的，您需要提供最小化代码以重现问题，而不是完整的项目代码：https://stackoverflow.com/help/minimal-reproducible-example - Temani Afif

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>

- Temani Afif

---

谢谢，这解决了我应用中的问题。据我理解，sticky-header:hover 会增加特定标题的 z-index 值，而 dropdown 和 dropdown-content 将继承此增加的 z-index 值。 - gregid

@gregid，这并不是真正的继承，而是将下拉菜单放置在由粘性元素创建的堆叠上下文中，并且我已经增加了堆叠上下文的z-index，使得所有元素都在顶部。更多详情请参考：https://dev59.com/TlQI5IYBdhLWcg3w-Qhi#54903621 - Temani Afif

谢谢您提供关于堆叠上下文的链接 - 那里有很好的解释！ - gregid

Answer 2

你需要给applet divs添加z-index属性。将第一个applet的z-index设为9999，你会发现下拉菜单会出现在其他菜单上方。

- Alberto Sinigaglia

---

如果我理解正确的话，您建议对每个小程序应用单独应用 z-index，例如 <div class="applet" style="z-index: 9999;">，然后按顺序递减索引：9998、9997 等等。这可能有效，但由于我的小程序是动态添加的，所以有点棘手。是否有其他通用方法可以实现这一点？ - gregid

我找不到方法，如果有的话。顺便说一下，如果您动态添加它们，则可能可以动态添加z-index（使用style属性）@gregid - Alberto Sinigaglia

是的，重新排序、移动等方面确实存在一些问题。所以并不是理想的解决方案，但至少它能够工作！如果不久后没有通用解决方案，我将接受这个答案。谢谢。 - gregid

@gregid 确定，我会尝试寻找其他解决方案（可能更通用）。 - Alberto Sinigaglia