如何调整伪元素::-moz-range-thumb的z-index？

Question

如何调整这个::-moz-range-thumb伪元素的z-index？有可能吗？

Devtools 检查员表示需要非

static

position

属性，但如您所见，

position

已设置为

relative

:

我在 Chrome 中使用了类似的 CSS（不同的供应商前缀），但无法在 Firefox 中使用它。

尝试检查现场演示（完整代码）：https://youloop.leftium.com/?v=dt-SqNL4z3w

预期（Chrome）：红色滑块拇指位于黄色滑块拇指之上：

实际 (Firefox)： 红色滑块拇指因 z 索引而被遮挡：

这是相关代码片段：

@mixin current-time-slider-thumb {
    background-color: $red-600;

    position: relative;
    z-index: 1000 !important;
}
&.current-time::-webkit-slider-thumb {
    @include current-time-slider-thumb;
}
&.current-time::-moz-range-thumb {
    @include current-time-slider-thumb;
}

Answer 1

只需将红点的

z-index

更改为带有

1

的

!important

，如下所示：

html body div main.container div.wrap-sliders.svelte-2uxdwg input.current-time.svelte-2uxdwg{
  z-index: 1 !important;
}