Как я могу расположить индикатор выполнения внизу кнопки?

Question

У меня возникла небольшая проблема, и я не могу понять это.

Я пытаюсь создать кнопку и добавить индикатор загрузки начальной загрузки внизу, но я не могу понять, как заставить ее сделать именно это.

Вот мои текущие настройки. https://jsfiddle.net/bob_mosh/7qeazm9w/3/

HTML:

<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</button>

CSS:

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 8px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

body {
  background-color: rgba(37, 38, 43, 1.00)
}

.buttonTitle {
    font-weight: 700;
    font-size: 1.5em;
    display: block;
}

.volume-slider {
    bottom:0;
    height: 8px !important;
}

Это текущее состояние справа и то, как я его представляю слева.

По какой-то причине я не могу заставить работать абсолютное позиционирование. Каждый раз, когда я пытаюсь установить абсолютное положение индикатора выполнения, он полностью исчезает. Может ли кто-нибудь помочь мне понять это?

Answer 1

Пересмотрел ваш код на JsFiddle.Я внес в него некоторые изменения, пожалуйста, просмотрите:

<div class="progress progress-bottom">
<div class="progress-bar progress-child" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

CSS:

.progress-bottom {
  position: relative;
  left: -8px;
  top: 15px;
  width: 250px;
}

Это позволило мне получить индикатор выполнения внизу.Как это:

Answer 2

Все, что вам нужно сделать, это добавить position: relative; в класс .soundButton, а затем скопировать его в .volume-slider

.volume-slider {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 8px !important;
}

Рабочий образец скрипки ЗДЕСЬ

Answer 3

Я понял это!

Оказывается, мне пришлось добавить еще один div, чтобы он заработал.Рабочий код выглядит следующим образом:

<button id="sample_button" type="button" class="soundButton">
  <div class="buttonWrapperInside">
    <label class="buttonTitle">Bird Song</label>
    <label class="buttonDescription">A nice bird song.</label>
  </div>
  <div class="progress volume-slider">
    <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</button>

.progress {
    background-color: rgba(0, 0, 0, 0.15) !important;
    vertical-align: bottom;
}

.progress-bar {
    width: 100%;
    height: 8px;
}

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 0px 0px 8px 0px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

.volume-slider {
    bottom:0px;
    height: 8px !important;
        position: relative;
        width: 100%;
}

.buttonWrapperInside {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
}

Это работает!

Большое спасибо за вашу помощь, ребята, было много указателей, которые помогли мне попасть туда!Ваша помощь очень ценится!

Answer 4

Короче говоря:

Абсолютное позиционирование работает только внутри относительного контейнера. Я создал контейнер в вашем HTML, который только делает это. В основном я установил position:relative, а затем использовал position:absolute; для элемента внутри него. Он исчезает, потому что absolute позиционирование удаляет элемент из потока. Таким образом, другие элементы не знают о его существовании и в основном застревают в первом относительном элементе, который он находит в домене. Если этого не произойдет, то получится «пуф».

Читайте о позиционировании здесь

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 8px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

body {
  background-color: rgba(37, 38, 43, 1.00)
}

.buttonTitle {
    font-weight: 700;
    font-size: 1.5em;
    display: block;
}

.volume-slider {
    bottom:0;
    height: 8px !important;
}

.progress-bar {
  background-color: green;
  height: 50px;
  position: absolute;
}

.progress-container {
  position: relative;
}

<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress-container">
  <div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</button>