css - 无法在完整进度条上覆盖元素

Question

我在覆盖引导进度条内的元素时遇到问题。

图标在部分填充的进度条上被过度播放，但在完整的进度条上，图标不显示。

Answer 1

您可以通过将以下代码应用于进度元素和包含图标的 div 来实现所需的结果。

应用于元素样式position: relative;：.progress

<div class="progress" style="position: relative;">

应用于包裹图标position: absolute; top: 0; right: 7px;的元素：div

<div style="position: absolute; top: 0; right: 7px">
    <!-- icon elements -->
</div>

完整的示例解决方案（取自您的代码并修改）：

<div class="progress progress-striped active" style="background: #ddd; position: relative;">
    <div class="progress-bar progress-bar-danger" style="width: 100%; float: left;"></div>
    <div style="position: absolute; top: 0; right: 7px;">
        <span class="glyphicon glyphicon-info-sign"></span> 
        <span class="glyphicon glyphicon-new-window"></span>
    </div>
</div>

希望这可以帮助你:)

Answer 2

即使在完整的进度条中也会显示图标，但图标会被进度条覆盖。您可以通过创建自己的 CSS 并添加z-index: 0;图标样式来修复它

.modal-footer span{
    z-index: 0;
}

Answer 3

他们正在使用向左浮动......所以酒吧推动他们。

尝试在包含图标的 div 上使用绝对位置。