引導模態內的CSS偽元素z-index

Question

我正在嘗試在引導程序模式（Bootstrap v3）中使用狀態指示器，並且z-index出現問題。 我的CSS是：

.progressbar {
  counter-reset: step;
  font-size: 16px;
  color: #a697a8;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
  font-weight: bold;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 40px;
  background-color: #a697a8;
  color: #ffffff;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 14px;
  top: 13px;
  left: -50%;
  z-index: -1;
  background-size: 35px 35px;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  background-color: #a697a8;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: #6d9b31;
}

.progressbar li.active:before {
  background-color: #6d9b31;
}

.progressbar li.active+li:after {
  background-color: #6d9b31;
}

<button type="button" id="btn" data-toggle="modal" data-target="#myModal">Show modal</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg" style="width: 90%">
        <div class="modal-content">
            <div class="modal-body">
                <div>
                    <div>
                        <ul class="progressbar">
                            <li >
                                First status
                            </li>
                            <li >
                                Second status
                            </li>
                            <li >
                                Third status
                            </li>
                            <li >
                                Fourth status
                            </li>
                            <li >
                                Fifth status
                            </li>
                        </ul>
                    </div>
                </div>
                <br /><br /><br />
                <hr />
                <div>
                    <label>Some label</label><br /><br />
                </div>
            </div>
        </div>
    </div>
</div>

所以我期待這樣的事情： 但是我得到了類似的東西： 看到引導程序模態的默認z索引為1050，我相信這就是問題所在。 但是，我嘗試將：after元素放在z-index 1051上，而將：before元素放在1052上，因此：before元素位於：after元素的頂部，但沒有成功。 發生了什么事，我得到了： 那么，我該怎么辦，以便在引導程序模式中有所需的狀態指示器？

示例： http ： //jsfiddle.net/vgm3kby2/5/

Answer 1

添加位置：相對； 到您的.progressbar li：之前

.progressbar li:before {
        content: counter(step);
        counter-increment: step; 
        position: relative;
        width: 40px;
        height: 40px;
        border: 1px solid #ffffff;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        line-height: 40px;
        background-color: #a697a8;
        color: #ffffff;  
        z-index: 1052;
    }

    .progressbar li:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 14px;
        top: 13px;
        left: -50%;
        z-index: 1051;
        background-size: 35px 35px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        background-color: #a697a8;
    }

此處的工作示例： https : //jsbin.com/yufufepepu/edit?html,css,output