1. 首頁
  2. 問答
  3. css步驟嚮導z-index不起作用

css步驟嚮導z-index不起作用

2017-06-26 35 views
2

我已經編碼瞭如下的步驟嚮導。css步驟嚮導z-index不起作用

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的不起作用。
類「step」的z-index爲10，而「step：before，step：after」之一爲9.
爲什麼「step：after」元素，灰線放在綠色圓圈的上方？
所以我不明白z-索引。
謝謝。

來源

2017-06-26 Andrew Li

+0

的z-index只適用於定位的元素和你的'.step'元素不是 – j08691

+0

爲什麼不。步驟元素z-index的工作？ –

+0

感謝您的幫助。 –

回答

2

沒有請嘗試這一個。 1.我已經在.active .step範圍內添加了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; 
}

  • 我已經添加在。活躍。步驟下的z-index：比。步驟之後。

    .progress。活躍。步驟：後{ 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>

    來源

    2017-06-26 02:55:56 Victoria

    0

    請嘗試將元素前後的z-index設置爲-1。

    來源

    2017-06-26 01:45:36 user7553103

    +0

    我的背景的z-index是默認值0以外的東西，所以如果Z-指數爲-1，將不被顯示的線。 –

    1

    我能夠通過沒有給出的.step類來實現結果的z-index，然後給:before和:after元素的負z-index。

    我相信是給.step類z-index值影響其:before和:after元素。欲瞭解更多詳情，請在下面的評論中看到Michael Coker's偉大的技術解釋。

    如果有喜歡的背景頁面上的其他元素，給背景的-2一個z-index值就像我與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>

    來源

    2017-06-26 01:53:03

    +1

    *「我相信，給。步驟一類的z-index值會影響它：和前：元素後，」 *這是正確的。給人一種元素的'Z-index'啓動一個新的堆疊順序，以及它的所有孩子'Z-index'es會從父母的開始。'：after'元素是'.step'的子元素，所以它的'z-index'將相對於父元素。如果父項（'.step'）具有'z-index'，則子項不能具有較低的'z-index'。你的解決方法是做到這一點。 –

    +0

    但「之前」的z-index小於「臺階」，爲什麼元素上面的「臺階」圈「？ –

    +1

    把「之前」 @AndrewLi見上面我的意見。分配的z-index到父元素爲它的子元素啓動一個新的堆棧順序/上下文。讓子元素具有較低的z-index的唯一方法是從父元素中移除z-index。https://developer.mozilla.org/en-US /文檔/網絡/ CSS/CSS_Positioning/Understanding_z_index/The_stacking_context –

    相關問題

     相關問題