html - 如何将进度条放在按钮的底部？

Question

我遇到了一些问题，但我似乎无法解决。

我正在尝试创建一个按钮并在其底部添加一个 Bootstrap 进度条，但我似乎无法弄清楚如何让它做到这一点。

这是我当前的设置。 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

您需要做的就是将 position: relative; 添加到您的 .soundButton 类，然后将其复制到您的 .volume-slider

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

工作样本 fiddle HERE