如何设置固定元素，放置在置顶元素中，高于相对位置

Question

我将固定元素放置到另一个粘性元素上，并希望它覆盖页面上的任何其他元素。看起来很明显，但是... 最好看看 codepen。 我认为这不是正常行为。

在 Chrome 中测试 - 只是很奇怪。 在 Firefox 中测试 - 绘制时出现故障（尝试单击未显示的黑色区域）

这是明显的错误重播，我确实需要粘性元素中的固定元素，该元素覆盖放置在其旁边的相关元素。

有人可以帮忙吗？

查看代码 - 我尝试使用 z-index 并在粘性上方显示结果，之后结果非常不同。 “z-索引：-1；”看起来黑客接近成功，但我在页面上有很多其他元素具有正 z-index。

看这里我测试过的笔

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

Answer 1

你需要增加粘性元素的

z-index

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

来自 MDN 页面：

该值总是创建一个新的堆叠上下文。

因此，使用

z-index

作为固定元素是没有用的，因为它属于粘性元素创建的堆叠上下文，并且由于 bug 元素也以

z-index

等于

0

定位，树顺序将决定绘画订单：

8. 所有定位、不透明度或变换后代，按树顺序分为以下类别：
   1. 所有使用“z-index: auto”或“z-index: 0”定位的后代，按树顺序排列。 ^参考

您还可以减小 bug 元素的

z-index

，但我不建议这样做，因为您可能会面临元素隐藏在后面的不良行为：

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:-1;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

您也可以简单地删除

positon:relative

的 bug 元素：

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  z-index:1000; /* have no effect on non-postionned element*/
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

相关：为什么具有 z-index 值的元素不能覆盖其子元素？

---

如果您无法更改粘性元素的

z-index

，并且无法从

bug

元素中删除 position:relative，并且无法将其

z-index

降低到低于

0

，并且无法更改 HTML 结构，那么您无法这样做。

Answer 2

对固定元素使用 z-index 是没有用的，因为它属于粘性元素创建的堆叠上下文