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

Question

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

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

现在，我的进度条是stock layout，它在steps intro文本的下方和steps按钮的上方。它看起来是这样的：notice the bar is above steps

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

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