Issue with the background and z-index - html

Question

Here's the code that works the right way only if you remove background: #a1a1a1; from the .sign-up form. But I need the background. Changing z-index doesn't help since -1 value is too small and 0 is to big.
How to fix this problem?
Thank You.
.sign-up__form {
width: 260px;
padding: 20px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 5px solid #ff4e50;
top: 80px;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
.register-switch {
height: 32px;
margin-bottom: 20px;
padding: 4px;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.register-switch-input {
display: none;
}
.register-switch-label {
float: left;
width: 50%;
line-height: 32px;
color: #fff;
text-align: center;
cursor: pointer;
}
.register-switch-label:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: lightblue;
left: 0;
top: 0;
z-index: -1;
}
.register-switch-input:checked + .register-switch-label:after {
background: tomato;
}
.register-switch-input:checked + .register-switch-label {
font-weight: normal;
color: #666;
background: #fff;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
<form name="sign-up" class="sign-up__form">
<div class="register-switch">
<input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked>
<label for="sex-m" class="register-switch-label">Male</label>
<input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input">
<label for="sex-f" class="register-switch-label">Female</label>
</div>
</form>

Answer 1

You need to set a z-index on the .sign-up__form rule as well ..
.sign-up__form {
width: 260px;
padding: 20px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 5px solid #ff4e50;
top: 80px;
left: 0;
right: 0;
margin: auto;
position: absolute;
z-index: -1;
}
.register-switch {
height: 32px;
margin-bottom: 20px;
padding: 4px;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.register-switch-input {
display: none;
}
.register-switch-label {
float: left;
width: 50%;
line-height: 32px;
color: #fff;
text-align: center;
cursor: pointer;
}
.register-switch-label:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: lightblue;
left: 0;
top: 0;
z-index: -1;
border-radius: 5px;
}
.register-switch-input:checked + .register-switch-label:after {
background: tomato;
}
.register-switch-input:checked + .register-switch-label {
font-weight: normal;
color: #666;
background: #fff;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
<form name="sign-up" class="sign-up__form">
<div class="register-switch">
<input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked>
<label for="sex-m" class="register-switch-label">Male</label>
<input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input">
<label for="sex-f" class="register-switch-label">Female</label>
</div>
</form>