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：

之前

@Entity
class CrazyUser(){
    @PrimaryKey
    var id: Int = 0
    @Ignore
    var user: User? = null
}

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

引导模态内的CSS伪元素z-index

1 个答案: