Z-index 不适用于绝对位置

Question

I have created a custom toggle switch component that looks like this:

<template>
  <div>
    <label class="switch">
      <input
        type="checkbox"
        :checked="value"
        @change="changeSwitch"
      >
      <span class="slider round" />
      <img
        :src="require('../../assets/img/sun.svg')"
        class="toggle-img"
        alt="moon"
        width="18"
        height="18"
      >
      <img
        :src="require('../../assets/img/moon.svg')"
        class="toggle-img right"
        alt="moon"
        width="18"
        height="18"
      >
    </label>
  </div>
</template>

Styles of this component:

@use "../variables" as v;
@import "../mixins";

.switch {
  position: relative;
  display: inline-block;
  @include size(34px, 60px);

  input {
    display: none;
  }

  .toggle-img {
    z-index: 5;
    @include positions($top: 0, $bottom: 0);
    @include margin(auto, 0, auto, 5px);
    position: absolute;
    &.right {
      @include positions($right: 0);
      @include margin(7px, 5px, auto, 0);
    }
  }

  .slider {
    z-index: 4;
    @include positions(0, 0, 0, 0);
    position: absolute;
    cursor: pointer;
    background-color: var(--color-header-bg-pale);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    &:before {
      @include size(26px, 26px);
      @include positions($left: 4px, $bottom: 4px);
      position: absolute;
      content: "";
      background-color: var(--color-font-color);
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
    &.round {
      border-radius: 34px;
      &:before {
        border-radius: 50%;
      }
    }
  }

  input:checked + .slider:before {
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
}

What I want to do, is to make icons be under slider, but no matter how I tried to do that playing around with z-index it doesn't work and I can't get why.

I was trying to set z-index on every part like parent and child, also, I was trying to remove all other z-index in project, but it still makes no any impact.

Here is how it looks like:

Answer 1

Do you try to set right image z-index to lowest when the input checked? If not you should try this

input:checked + .right:before {
    z-index: -99;
  }