CSSウィザードのステップインデックスが機能しない

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インデックスは動作しません。
"step：before、step：after"のうちの1つは9です。
"step：after"要素、つまり灰色の線が緑色の円の上に置かれているのはなぜですか？ ？
私はz-indexをよく理解していません。
ありがとうございます。

Answer 1

で行ったように

は、背景に-2のz-index値を与えます。 1.アクティブな.stepスパンにZ-インデックスを追加し、バックグラウンドで円にしました。

.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は.active。ステップに低いZインデックスを追加しました：。ステップより後。

.progress .active。ステップ：{ z-index：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>

Answer 2

beforeとafter要素のz-indexを-1に設定してください。

Answer 3

私は:beforeと:after要素負z-indexを与え、その後z-indexと.stepクラスを与えられていないで結果を達成することができています。

私は.stepクラスにz-index値を与えることがその:beforeと:after要素に影響と信じています。その詳細については、下記のコメントのMichael Coker's素晴らしい技術的な説明を参照してください。背景のようなページ上の他の要素がある場合、私はこの1つを試してみてください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>