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

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

长话短说：

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

了解定位 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 2

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

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

工作样本fiddleHERE

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

在 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;
}

这让我得到了底部的进度条。像这样：

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

How can I position my progress bar at the bottom of a button?

html

css

vertical-alignment

bootstrap-4