css step wizard z-index not working - html

Question

I've coded the step wizard as below.
ul.progress[data-steps="2"] li { width: 49%; }
ul.progress[data-steps="3"] li { width: 33%; }
ul.progress[data-steps="4"] li { width: 24%; }
ul.progress[data-steps="5"] li { width: 19%; }
ul.progress[data-steps="6"] li { width: 16%; }
ul.progress[data-steps="7"] li { width: 14%; }
ul.progress[data-steps="8"] li { width: 12%; }
ul.progress[data-steps="9"] li { width: 11%; }
.progress {
width: 100%;
list-style: none;
list-style-image: none;
padding: 20px 0;
margin:0;
overflow:hidden;
border:2px solid #000;
}
.progress li {
float: left;
text-align: center;
position: relative;
}
.progress .name {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 25px;
color: black;
opacity: 0.3;
}
.progress .step {
color: black;
border: 3px solid silver;
background-color: silver;
border-radius: 50%;
line-height: 1.2;
width: 30px;
height: 30px;
display: inline-block;
z-index: 10;
}
.progress .step span {
opacity: 0.3;
}
.progress .active .name,
.progress .active .step span {
}
.progress .step:before {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
left: 0;
z-index: 9;
}
.progress .step:after {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
right: 0;
z-index: 9;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
background-color: yellowgreen;
}
.progress .done .step,
.progress .active .step {
border: 3px solid yellowgreen;
}
<div>
<ul class="progress" data-steps="4">
<li class="done">
<span class="name">Foo</span>
<span class="step"><span>1</span></span>
</li>
<li class="done">
<span class="name">Bar</span>
<span class="step"><span>2</span></span>
</li>
<li class="active">
<span class="name">Baz</span>
<span class="step"><span>3</span></span>
</li>
<li>
<span class="name">Quux</span>
<span class="step"><span>4</span></span>
</li>
</ul>
</div>
But the z-index doesn't work.
z-index of the class "step" is 10, while the one of "step:before,step:after" is 9.
Why does the "step:after" element , gray line , put above the green circle?
So I don't understand the z-index well.
Thanks.

Answer 1

Please try this one.
1. I've added the z-index in .active .step span and and made it to circle with background.
.progress .active .name,
.progress .active .step span {
position:relative;
z-index:11;
opacity: 1;
}
.progress .active .step span {
border-radius: 50%;
line-height: 1.2;
width: 35px;
height: 29px;
display: inline-block;
z-index: 12;
margin:-2px 0 0 -2px;
padding-top:6px;
background-color: yellowgreen;
}
I've added the lower z-index in .active .step:after than .step.
.progress .active .step:after {
z-index:8;
}
Please see whole code below;
ul.progress[data-steps="2"] li { width: 49%; }
ul.progress[data-steps="3"] li { width: 33%; }
ul.progress[data-steps="4"] li { width: 24%; }
ul.progress[data-steps="5"] li { width: 19%; }
ul.progress[data-steps="6"] li { width: 16%; }
ul.progress[data-steps="7"] li { width: 14%; }
ul.progress[data-steps="8"] li { width: 12%; }
ul.progress[data-steps="9"] li { width: 11%; }
.progress {
width: 100%;
list-style: none;
list-style-image: none;
padding: 20px 0;
margin:0;
overflow:hidden;
border:2px solid #000;
}
.progress li {
float: left;
text-align: center;
position: relative;
}
.progress .name {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 25px;
color: black;
opacity: 0.3;
}
.progress .step {
color: black;
border: 3px solid silver;
background-color: silver;
border-radius: 50%;
line-height: 1.2;
width: 30px;
height: 30px;
display: inline-block;
z-index: 10;
}
.progress .step span {
opacity: 0.3;
display:inline-block;
margin-top:4px;
position:relative;
z-index:10;
}
.progress .active .step span {
border-radius: 50%;
line-height: 1.2;
width: 35px;
height: 29px;
display: inline-block;
z-index: 12;
margin:-2px 0 0 -2px;
padding-top:6px;
background-color: yellowgreen;
}
.progress .active .name,
.progress .active .step span {
position:relative;
z-index:11;
opacity: 1;
}
.progress .step:before {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
left: 0;
z-index: 9;
}
.progress .step:after {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
right: 0;
z-index: 9;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
background-color: yellowgreen;
}
.progress .active .step:after {
z-index:8;
}
.progress .done .step,
.progress .active .step {
border: 3px solid yellowgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<ul class="progress" data-steps="4">
<li class="done">
<span class="name">Foo</span>
<span class="step"><span>1</span></span>
</li>
<li class="done">
<span class="name">Bar</span>
<span class="step"><span>2</span></span>
</li>
<li class="active">
<span class="name">Baz</span>
<span class="step"><span>3</span></span>
</li>
<li>
<span class="name">Quux</span>
<span class="step"><span>4</span></span>
</li>
</ul>
</div>
</body>
</html>

Answer 2

I am able to achieve the result by not given the .step class a z-index and then giving the :before and :after element a negative z-index.
I believe that giving the .step class a z-index value affects its :before and :after elements. For more details on that please see Michael Coker's great technical explanation in the comments below.
If there are other elements on the page like a background, give the background a z-index value of -2 like I did with the body
body {
background:rgba(0, 0, 0, 0.77);
z-index:-2;
}
ul.progress[data-steps="2"] li { width: 49%; }
ul.progress[data-steps="3"] li { width: 33%; }
ul.progress[data-steps="4"] li { width: 24%; }
ul.progress[data-steps="5"] li { width: 19%; }
ul.progress[data-steps="6"] li { width: 16%; }
ul.progress[data-steps="7"] li { width: 14%; }
ul.progress[data-steps="8"] li { width: 12%; }
ul.progress[data-steps="9"] li { width: 11%; }
.progress {
width: 100%;
list-style: none;
list-style-image: none;
padding: 20px 0;
margin:0;
overflow:hidden;
border:2px solid #000;
}
.progress li {
float: left;
text-align: center;
position: relative;
}
.progress .name {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 25px;
color: white;
opacity: 1;
}
.progress .step {
color: black;
border: 3px solid silver;
background-color: silver;
border-radius: 50%;
line-height: 1.2;
width: 30px;
height: 30px;
display: inline-block;
}
.progress .step span {
opacity: 1;
}
.progress .active .name,
.progress .active .step span {
}
.progress .step:before {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
left: 0;
z-index: -1;
}
.progress .step:after {
content: "";
display: block;
background-color: silver;
height: 5px;
width: 50%;
position: absolute;
bottom: 15px;
right: 0;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
background-color: yellowgreen;
}
.progress .done .step,
.progress .active .step {
border: 3px solid yellowgreen;
}
<div>
<ul class="progress" data-steps="4">
<li class="done">
<span class="name">Foo</span>
<span class="step"><span>1</span></span>
</li>
<li class="done">
<span class="name">Bar</span>
<span class="step"><span>2</span></span>
</li>
<li class="active">
<span class="name">Baz</span>
<span class="step"><span>3</span></span>
</li>
<li>
<span class="name">Quux</span>
<span class="step"><span>4</span></span>
</li>
</ul>
</div>

Answer 3

Please try to set z-index of before and after element to -1.