intro.js - 重新定位进度条并放在底部（在步骤下方）答案

【问题标题】：intro.js - reposition progress bar and put on bottom (beneath steps)intro.js - 重新定位进度条并放在底部（在步骤下方）
【发布时间】：2017-01-12 19:39:09
【问题描述】：

有没有更干净的方法？如何将进度条定位在introjs-tooltip 的最底部？这是我的 CSS，我想要的应该是 look like this。

.introjs-progress {
    width: 112%;
    opacity: 1;
    margin: 0;
    bottom: -65px;
    position: relative;
    left: -25px;
}

现在，我的进度条是股票布局，它位于步骤介绍文本下方和步骤按钮上方。这是它的样子：notice the bar is above steps

祝您2017年身体健康，财富和智慧 - 新年快乐！ GLHF

【问题讨论】：

你能举一个活生生的例子吗？
请参阅附加到此堆栈的两张图片 - 我正在使用文档中的 introjs 进度条码 -- introjs.com/docs/getting-started/examples
如果你想得到帮助，下次你真的应该包含更多的代码或实际的例子。屏幕截图很少够用。
我会听取您的建议并听取所有未来的帖子。一旦我有足够的声誉，我会回来投票。

标签： javascript html css intro.js

【解决方案1】：

在 progress 元素上使用绝对定位，并为它的父元素 tooltip 添加一点额外的底部填充以美观。

.introjs-tooltip {
    padding: 10px 10px 14px 10px;
}

.introjs-tooltipbuttons, .introjs-tooltiptext {
    text-align: center;
}

.introjs-progress {
    overflow: hidden;
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0;
    width: 100%;
    /* margin: 10px 0 5px 0; */
    /* border-radius: 4px; */
    background-color: #ecf0f1;
}

【讨论】：