Question

我在引导程序进度条中覆盖元素时遇到问题。

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

Answer 1

通过将以下代码应用于progress元素和包含图标的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上使用绝对位置。

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

3 个答案: