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

长话短说：

绝对定位仅在相对容器内部起作用。我在您的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 3

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

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

工作示例小提琴HERE

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

这行得通！

非常感谢您的帮助，很多建议可以帮助我实现目标！非常感谢您的帮助！

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

4 个答案: