Html 如何将进度条定位在按钮底部？

我面临着一点问题，我似乎无法解决

我试图创建一个按钮，并在底部添加一个引导进度条，但我似乎不知道如何让它做到这一点

这是我目前的设置

HTML:

右边是当前状态，左边是我设想的状态。

由于某些原因，我无法使绝对定位工作。每次我尝试将进度条的位置设置为绝对时，它都会完全消失。有人能帮我解决这个问题吗？

长话短说：

绝对定位仅在相对容器内工作。我在你的html中创建了一个容器，它只做这个。我基本上只将其设置为

position:relative

，然后使用

position:absolute在其内部的元素上。它会消失，因为
absolute
定位将元素从流中移除。所以其他元素不知道它的存在，并且基本上被困在它找到dom的第一个相对元素中。如果没有，它就会发出“噗”

了解定位


.soundButton{
显示：表格单元格；
背景色：rgba（255、255、255、0.650）；
保证金：4倍；
填充：8px；
宽度：250px；
高度：120px！重要；
边界半径：8px；
边界：没有！重要；
浮动：左！重要；
}
.声音按钮标签{
颜色：rgba（37,38,43,1.00）！重要；
}
身体{
背景色：rgba（37,38,43,1.00）
}
.钮扣{
字号：700；
字号：1.5em；
显示：块；
}
.音量滑块{
底部：0；
高度：8px！重要；
}
.进度条{
背景颜色：绿色；
高度：50px；
位置：绝对位置；
}
.进度容器{
位置：相对位置；
}

鸟鸣
一首优美的鸟歌。
您只需添加
位置：相对到你的
.soundButton
类，然后将其复制到你的
.volume slider

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

工作样品小提琴
我弄明白了

结果是我不得不添加另一个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>

这管用

非常感谢你们的帮助，伙计们，有很多指点帮助我到达那里！非常感谢你的帮助
 在JSFIDLE上查看了您的代码。我对它做了一些更改，请查看：

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

这使我能够在底部获得进度条。如下所示：
是否希望进度条显示在按钮下方，并显示在按钮结构旁边？你期待上面的结果吗？很抱歉，我没有完全弄清楚，我希望按钮位于按钮的底部边缘，而不是按钮的外部。删除按钮的填充，并仅为文本设置填充，看看这是否是预期的结果？你不必添加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;
}

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

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