intro.js - переставить индикатор выполнения и поставить внизу (ниже шагов)

Question

Есть ли более чистый подход? Как я могу расположить индикатор выполнения в самом низу introjs-tooltip? Вот мой CSS, и то, что я хочу, должно выглядеть следующим образом.

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

Прямо сейчас, мой индикатор выполнения - это макет акций, он находится под текстом вступления шагов и над кнопками шагов. Вот как это выглядит: обратите внимание на панель выше шагов

Желаю вам крепкого здоровья, богатства и мудрости в 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;
}