CSS步骤向导Z索引无效

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

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

请尝试将元素之前和之后的z-index设置为-1。