css 步骤向导 z-index 不工作

Question

我将步骤向导编码如下。

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>

但是 z-index 不起作用。
class "step" 的 z-index 为 10，而 "step:before,step:after" 的 z-index 为 9.
为什么 "step:after" 元素（灰线）放在绿色圆圈上方？
所以我对z-index不是很了解
谢谢

Answer 1

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

Answer 2

我可以通过 not given the .step class a z-index 然后给出 :before 和 :after 元素 a negative z-index.

我相信给.stepclass一个z-index值会影响它的:before和:after元素。有关详细信息，请参阅下面评论中的 Michael Coker's 精彩的技术解释。

如果页面上还有其他元素，例如背景，请像我对 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

请试试这个。 1. 我在 .active .step span 中添加了 z-index 并使其与背景一起环绕。

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

我在 .active .step:after 中添加了比 .step 更低的 z-index。

.progress .active .step:after { z-索引：8； }

请看下面的完整代码；

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>

css 步骤向导 z-index 不工作

css step wizard z-index not working

html

css

wizard