zindex

zindex problem

HTML

<html lang="en">
<body>
  <div class="RadioContainer">
  <div class="RadioButton"> Click Here to Choose </div>
  <div class="AnItem" style="transform: translateY(-4.32px); z-index: -1;"> Item A </div>
  <div class="AnItem" style="transform: translateY(-4.32px); z-index: -2;"> Item B </div>
  </div>
</body>

CSS

.Centerer {
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.RadioContainer {
    display: inline-block;
}

.RadioButton {
    display: inline-block;
    z-index: 10;
    background-color: white;
}

.AnItem {
    background-color: darkgrey;
}

.TopHalf {
    height: 50vh;
}