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

有没有更清洁的方法？如何将进度条放置在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年身体健康，财富充沛，万事如意-从我这里到您新年快乐！玻璃纤维

最佳答案

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