Z-index 不適用於絕對位置

Question

我創建了一個自定義切換開關組件，如下所示：

<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：

@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);
  }
}

我想要做的是讓圖標位於 slider 下，但無論我如何嘗試使用z-index進行操作，它都不起作用，我不明白為什么。

我試圖在每個部分（如父母和孩子）上設置z-index ，此外，我試圖刪除項目中的所有其他z-index ，但它仍然沒有任何影響。

這是它的樣子：

Answer 1

當輸入檢查時，您是否嘗試將正確的圖像 z-index 設置為最低？ 如果不是，你應該試試這個

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