javascript - CSS 伪元素 z-index inside bootstrap modal

Question

我试图在我的 Bootstrap 模式 (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>

所以我期待的是:但我得到的是:看到 Bootstrap 模式的默认 z-index 为 1050，我相信这就是问题所在。但是，我试图将 :after 元素放在 z-index 1051 上，将 :before 元素放在 1052 上，因此 :before 元素位于 :after 元素之上，但没有成功。发生的事情是我得到这个:那么，我该怎么做才能在 Bootstrap 模式中获得所需的状态指示器？

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

Answer 1

添加position:relative；到你的 .progressbar li:before

.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