0

EDIT: Added code and JS-fiddle

I know this is a common question but I have read all the other related questions and I can't seem to work it out. Sorry if I am being dumb?

why is item A above the button div when the z-indexs should mean otherwise?

enter image description here

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


.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;
}

Here is a JS-fiddle version

https://jsfiddle.net/jwz5v2xr/

Ian McGarry
  • 145
  • 1
  • 11
  • What do you want to achieve? and there is nothing called `z-index:-2;` also did you know that `z-index` to get to work you have to use few `position` properties? – Manjuboyz Oct 04 '20 at 13:06
  • What do you mean there is nothing called z-index:-2? and what position properties do I need to use? – Ian McGarry Oct 04 '20 at 13:12
  • In radio-button class you need to add "position: relative". – Ishita Ray Oct 04 '20 at 13:15
  • 1
    You can start from here: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index, and this is the comment from w3schools `z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).` https://www.w3schools.com/cssref/pr_pos_z-index.asp – Manjuboyz Oct 04 '20 at 13:15
  • Ok I didn't realise that static was the default – Ian McGarry Oct 04 '20 at 16:14

1 Answers1

1

.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;
    position: relative;
}

.AnItem {
    background-color: darkgrey;
}

.TopHalf {
    height: 50vh;
}
<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>

I have added "position: relative;".

Ishita Ray
  • 672
  • 3
  • 8