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

Question

I am trying to write code for folder tabs

what I am trying to archive is that when each folder tab is clicked, it should be shown the top most of other tabs while the others are positioned behind it.

I tried to work with z-index:-1 for all tabs yet the clicked tab gain z-index:3 but it doesn't work.

One strange thing is that when I remove the line of z-index : -1; in label style which will make the default z-index of the label to be auto (z-index : auto;) it works. My question is that why z-index: -1 doesn't work while z-index:auto works for label style?

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

When you use z-index: -1 you should also add z-index: 0; to its parent - section .header div in your case, in order to put the element behind the desired element(s) in the same div. Otherwise it puts it behind the root element of the page. But in your case, the problem is that you hide the radio inputs. Apply the following css: position: absolute; width: 100%; height: 100%; opacity: 0; to your section .header input instead of the display:none; and it will work