Drawing a line behind range input - html

Question

I'm trying to implement a Likert scale UI. I want to have the green line go behind the radio buttons. I tried changing the z-index but no luck...
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: 0;
}
input[type=radio] {
display: block;
margin: auto;
z-index: 1;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio"/>
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>

Answer 1

z-index will only work along with position.
Adding position to your input[type=radio] will meet your requirement.
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: 0;
}
input[type=radio] {
position:relative;
display: block;
margin: auto;
z-index: 1;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio"/>
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio"/>
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>

Answer 2

Note that z-index will only apply to elements that have a position. As such, your input elements have no z-index applied to them, and resort to the default value of 0.
It gets a little complicated with hierarchy, and .box is a sibling of .line. As such, all of your .box elements are of equal z-index to your line.
To have the line behind the notes, you'll want to use a value of -1 for .line. Note that this will actually place the .line behind container, because that also defaults to 0. As such, you'll additionally want to set a value of -1 on #container.
Ultimately, you just need to ensure four things:
That .line has a z-index equal to or greater than #container
That .box has a higher z-index than .line
That input has a z-index equal to or greater than .box
That all elements with z-index also have a position
This can be seen in the following, which only sets a -1 z-index on #container and .line:
#container {
text-align: justify;
background-color: #ff5050;
position: relative;
z-index: -1;
}
.line {
width: 100%;
height: 2px;
background-color: green;
position: absolute;
top: 5px;
z-index: -1;
}
input[type=radio] {
display: block;
margin: auto;
}
.box {
width: 60px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div class="box">
<input type="radio" name="radio" />
<label>A</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>B</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>C</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>D</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>E</label>
</div>
<div class="box">
<input type="radio" name="radio" />
<label>F</label>
</div>
<div class="line"></div>
<span class="stretch"></span>
</div>
Hope this helps! :)