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

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

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

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

工作样本小提琴HERE

Answer 2

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

长话短说：

绝对定位仅在相对容器内有效。我在您的 html 中创建了一个仅执行此操作的容器。我基本上只将它设置为position:relative，然后我在其中的元素上使用了position:absolute;。它消失是因为absolute 定位将元素从流中移除。所以其他元素不知道它的存在，并且基本上被卡在它找到 dom 的第一个相关元素中。如果没有，它会“噗”的一声。

了解定位here

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

Answer 4

我想通了！

原来我必须添加另一个 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;
}

这行得通！

非常感谢你们的帮助，有很多帮助我到达那里的指点！非常感谢您的帮助！