Как применить z-index для ранжирования псевдоэлементов - PullRequest
Новая
       21

Как применить z-index для ранжирования псевдоэлементов

1 голос
/ 23 января 2020

Я пытался построить ползунок цены двумя большими пальцами, стилизовав два входа и переместив один поверх другого, используя transform: translateY();. Тем не менее, большой палец со второго входа отображается под дорожкой первого входа. Я попытался установить z-index для этих псевдоэлементов, но это не помогло вообще. это html: 

<input type="range" class="custom-range" min="0" max="800" step="1" value="0">
<input type="range" class="custom-range" min="0" max="800" step="1" value="800">

и css (я использовал Bootstrap, поэтому некоторые стили взяты из него; background: red добавлено для большого пальца для визуального различия): 

    :root {
  --input-height: 30px;
  --low-perc: 0%;
  --high-perc: 100%;
}
input {
    height: var(--input-height);
    position: relative;
}
input:nth-of-type(2) {
    transform: translateY(calc(-1 * var(--input-height) - 10px));
}
input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, rgba(0, 123, 255, 0) var(--low-perc), rgb(0, 123, 255) var(--low-perc), #007BFF var(--high-perc), rgba(0, 123, 255, 0) var(--high-perc));
    z-index: 1;
}
input:nth-of-type(2)::-webkit-slider-runnable-track {
    height: 0;
    margin-top: --input-height;
}
input::-webkit-slider-thumb {
    background: red;
    z-index: 10;
}

Что я могу / должен сделать в этой ситуации? Большое спасибо за вашу помощь.

...