进度条线消失在另一个元素内

Question

这是我正在使用的 CSS。

.qualitybar {   
    overflow: hidden;
    color: lightgrey
}

.qualitybar .status_verified {
    color: #5cb85c;
}

.qualitybar .status_needs_verification {
    color: #f0ad4e;
}

.qualitybar .status_needs_id {
    color: #d9534f;
}

.qualitybar .status_needs_tags {
    color: darkslategray;
}

.qualitybar li {
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400
}

.qualitybar .needs_tags:before {
    font-family: FontAwesome;
    content: "\f00c"
}

.qualitybar .needs_id:before {
    font-family: FontAwesome;
    content: "\f00c"
}

.qualitybar .needs_verification:before {
    font-family: FontAwesome;
    content: "\f00c"
}

.qualitybar .verified_id:before {
    font-family: FontAwesome;
    content: "\f00c"
}

.qualitybar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

.qualitybar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0%;
    top: 25px;
    z-index: -1
}

.qualitybar li.status_verified:before,
.qualitybar li.status_verified:after {
    background: #5cb85c;
}

.qualitybar li.status_needs_verification:before,
.qualitybar li.status_needs_verification:after {
    background: #f0ad4e;
}


.qualitybar li.status_needs_id:before,
.qualitybar li.status_needs_id:after {
    background: #d9534f;
}


.qualitybar li.status_needs_tags:before,
.qualitybar li.status_needs_tags:after {
    background: darkslategray;
}


.qualitybar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%
}


.qualitybar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%
}

.qualitybar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px
}

.qualitybar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px
}

这是 HTML

<div class="card">
            <div class="card-header">
                <div class="row justify-content-center">
                    <div class="col-md-12 text-center">
                            
                            <ul class="qualitybar">
                                <li class="status_verified needs_tags"><strong>Step 1</strong></li>
                                <li class="status_verified needs_id"><strong>Step 2</strong></li>
                                <li class="status_verified needs_verification"><strong>Step 3</strong></li>
                                <li class="status_verified verified_id"><strong>Step 4</strong></li>
                            </ul>
                            
                    </div>
                </div>
        
            </div>
        </div>


        <div class="row justify-content-center mt-2">
            <div class="col-md-12 text-center">
                    
                    <ul class="qualitybar">
                        <li class="status_verified needs_tags"><strong>Step 1</strong></li>
                        <li class="status_verified needs_id"><strong>Step 2</strong></li>
                        <li class="status_verified needs_verification"><strong>Step 3</strong></li>
                        <li class="status_verified verified_id"><strong>Step 4</strong></li>
                    </ul>
                    
            </div>
        </div>

我正在使用引导程序。这是我遇到的问题

如屏幕截图所示，顶部进度条没有显示线条，尽管它与底部进度条的代码相同。

基于发布的其他类似解决方案，我尝试将 z-index 更改为 1。但这正在发生--

如何让进度条在卡片标题中正常工作而没有任何罢工？

Answer 1

问题是因为.qualitybar li:after 上的 -1 索引。为了更好地理解为什么线条没有显示在顶部而是显示在底部，我们需要查看：

1. 元素按什么顺序堆叠，if z-index is not specified
2. z-index 将如何影响堆叠顺序，在所谓的“the stacking context”中

总结：

• z-index 是非继承属性。因此，当您未在元素上指定它时，将使用其初始值，即auto
• 当不指定z-index时，默认按以下顺序堆叠元素（从最远到最近观察者）
  1. 根元素的背景和边框 (<html>)
  2. 后代非定位块 (position: static;)
  3. 后代定位块
• 要更改默认堆叠顺序，您可以在定位元素上使用z-index
• 堆栈上下文由具有z-index 值而不是auto 的定位元素形成（在其他情况下也会形成堆栈上下文）
• 每个堆叠上下文都是自包含的：元素的内容堆叠后，整个元素按照父堆叠上下文的堆叠顺序考虑

说得够多了。回到你的问题...

在顶部进度条上，除了auto 之外，没有具有z-index 值的定位元素，但.qualitybar li:after 除外，它具有-1 z-index 值。所以唯一的堆叠上下文是根上下文：

• 根堆叠上下文<html />
  • div class="卡片"
  • div class="card-header"
  • div class="行"
  • div class="col-md-12"
  • ul class="质量条"
  • li class="status_verified"
  • li::之前
  • 强
  • li::after

所以.qualitybar li:after 位于根上下文中所有其他元素的后面。由于.card 有白色背景，线条被白色背景覆盖，因此不显示。

在底部的进度条上，同样的事情发生了。只有一个根堆叠上下文，但由于没有.card 并且所有其他元素都有透明背景，所以线条正在显示。

快速修复

你肯定仍然需要在线条上使用z-index:-1;，它的样式是.qualitybar li:after，因为你不希望线条出现在步骤点的顶部。但是您不希望这些线条隐藏在其他元素后面那么远。快速解决方法是在 .qualitybar li 本身上创建一个堆叠上下文。

请记住，要创建堆叠上下文，您只需在定位元素上添加 z-index 以外的值而不是 auto。 .qualitybar li 已经设置了相对位置的样式。所以你只需要添加一个大于-1的z-index值。

.qualitybar li {
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;

    z-index: 0;
}

而且由于堆栈上下文是自包含的。这些线将隐藏在.qualitybar li 堆叠上下文中的元素之间。但是.qualitybar li 元素在根堆叠上下文下的其他元素中具有相同的z-index:auto;。

演示： https://jsfiddle.net/davidliang2008/tnuckrfd/13/

解决罢工问题

您看到阶梯点出现罢工的原因如下：

.qualitybar li:last-child:after {
    ...
    left: -50%;
}

您的条形图从负左 50% 开始，因此它删除了图标。

我的修复如下：

.qualitybar {
    ...
    padding-left: 0;   /* Remove the left padding, or use `list-unstyled` */
}

...

.qualitybar li:first-child:after {
    left: calc(50% + 50px/2);  /* Start from 50% + half of your icon's width */
}

.qualitybar li:first-child:after,
.qualitybar li:last-child:after {
    width: calc(50% - 50px/2);  /* Instead of 100% width, you only want this wide */
}

演示： https://jsfiddle.net/davidliang2008/tnuckrfd/65/