无法在整个进度条上叠加元素

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 上使用绝对位置。