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 году - счастливого нового года от вас! 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; 
}