将滚动条轨道 z-index 设置在父元素后面

Question

我试图仅在滚动条轨道上方显示背景，以便轨道具有蓝灰色。这是最小的可重现示例。代码沙盒在这里

如果我创建包装类

position: relative, z-index:-1

那么整个包装都在背景后面，包括滚动条轨道。我只希望滚动条轨道位于背景后面。如果我只为

::-webkit-scrollbar-track

设置相同的 css，什么也不会发生。有谁知道如何实现这一目标。我发现了很多类似的帖子，但 99% 都是关于透明滚动条和溢出的。其他 1% 非常过时。

Answer 1

首先，从 .wrapper 类中删除

position: relative

和

z-index: -1

。

然后，将以下 CSS 添加到

::-webkit-scrollbar-track

选择器：

::-webkit-scrollbar-track {
    background-color: #c2c2c2;
    z-index: -1;
}

这会将滚动条轨道的背景颜色设置为蓝灰色，并将其 z-index 设置为 -1，这将使其显示在背景后面。

最后，将以下CSS添加到

.background

类：

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

这将绝对定位背景元素并将其 z-index 设置为 1，这将使其出现在滚动条轨道上方。

如果有帮助，请告诉我！一切顺利！