Почему z-index работает в input::-webkit-slider-thumb, но не в input::-moz-range-thumb? ⇐ CSS

[Anonymous]

Приведенный ниже фрагмент кода вставляет розовый элемент div между дорожкой и бегунком ползунка диапазона.
Почему это работает в других браузерах (

Код: Выделить всё

-webkit-slider-thumb

), но не Firefox (

Код: Выделить всё

-moz-range-thumb

)?
Инспектор элементов говорит, что z-index не имеет никакого эффекта, поскольку это не позиционный элемент, но позиция явно установлена ​​на относительный:


Примечание: прочтите мой первый вопрос. (это было закрыто) для полной мотивации, контекста и кода: Как настроить z-индекс псевдоэлемента ::-moz-range-thumb?

Код: Выделить всё

main {
position: relative;
width: 200px;
height: 50px;
}

div {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 25%;
background-color: pink;
}

input {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

input::-webkit-slider-thumb {
position: relative;
z-index: 1;
}

input::-moz-range-thumb {
position: relative;
z-index: 1;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... oz-range-t