css步向导z-index无法正常工作

时间：2017-06-26 01:42:28

标签： html css wizard

我已将步骤向导编码如下。 

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不起作用 类“步”的z-index为10，而“step：before，step：after”之一为9.
为什么“step：after”元素，灰线，放在绿色圆圈上方？
所以我不太了解z-index 感谢。

3 个答案:

答案 0 :(得分：2)

请尝试这个。 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;
}

  1. 我在.active .step中添加了较低的z-index：比.step。

    .progress .active .step：after {      的z-index：8;     }

    2. 请参阅下面的完整代码;

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：1)

我能够通过未给出 .step类z-index来获得结果，然后给出:before和:after元素否定 z-index。

我相信给.step类一个z-index值会影响其:before和:after元素。有关详细信息，请参阅以下评论中的Michael Coker's出色的技术说明。

如果页面上有其他元素（如背景），请将背景的z-index值设为-2，就像我对body

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

相关问题
最新问题