文件夹选项卡单选按钮的标签的 z-index 在单击时不起作用

Question

我正在尝试为文件夹选项卡编写代码

我要存档的是，当单击每个文件夹选项卡时，它应该显示在其他选项卡的最顶部，而其他选项卡位于它后面。

我尝试对所有选项卡使用 z-index:-1，但单击的选项卡获得 z-index:3，但它不起作用。

一件奇怪的事情是，当我删除标签样式中的 z-index : -1; 行时，这将使标签的默认 z-index 为自动 (z-index : auto;) 它起作用了。我的问题是为什么 z-index: -1 对标签样式不起作用而 z-index:auto 对标签样式起作用？

section {
  padding: 2rem;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}

section .header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}

section .header input {
  display: none;
}

section .header label {
  margin-left: -1rem;
  padding: 0.5rem 1rem;
  display: inline-block;
  position: relative;
  z-index: -1;
  border-radius: 27px 0 0 0;
}

section .header input:checked~label {
  z-index: 3;
  background-color: grey;
}

section .header .weather label {
  background-color: greenyellow;
}

section .header .others label {
  background-color: indianred;
}

section .header .about-us label {
  background-color: indigo;
}

section .main {
  flex: 1;
  border: 1px solid black;
}

<section>
  <div class="header">

    <div class="weather">
      <input type="radio" name="tab" id="weather">
      <label for="weather">weather</label>
    </div>
    <div class="others">
      <input type="radio" name="tab" id="others">
      <label for="others">others</label>
    </div>
    <div class="about-us">
      <input type="radio" name="tab" id="about-us" checked>
      <label for="about-us">about-us</label>
    </div>
  </div>
  <div class="main">
    This is main
  </div>
</section>

scss:

section {
  padding: 2rem;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  .header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    input {
      display: none;
    }
    label {
      margin-left: -1rem;
      padding: .5rem 1rem;
      display: inline-block;
      position: relative;
      z-index: -1; // while (z-index : auto;) works. why?
      border-radius: 27px 0 0 0;
    }
    input:checked~label {
      z-index: 3;
      background-color: grey;
    }
    .weather {
      label {
        background-color: greenyellow;
      }
    }
    .others {
      label {
        background-color: indianred;
      }
    }
    .about-us {
      label {
        background-color: indigo;
      }
    }
  }
  .main {
    flex: 1;
    border: 1px solid black;
  }
}

Answer 1

当您使用 z-index: -1 时，您还应该将 z-index: 0; 添加到其父级 - 在您的情况下为 section .header div，以便将该元素放在所需元素的后面相同 div。否则它会将它放在页面的根元素后面。但就您而言，问题在于您隐藏了无线电输入。将以下 css: position: absolute; width: 100%; height: 100%; opacity: 0; 应用到您的 section .header input 而不是 display:none; 并且它将起作用

文件夹选项卡单选按钮的标签的 z-index 在单击时不起作用

Folder tabs radio-button's labels' z-index doesn't work on click

html

tabs

sass

z-index

auto