javascript - intro.js - 重新定位进度条并放在底部(步骤下方)

Question

有没有更干净的方法？如何将进度条定位在 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年 body 健康，财源广进-新年快乐!极低频

Answer 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;
}