Bootstrap进度条随位置固定而消失

Question

当我用包含position: fixed的div包装进度条时，进度条刚刚消失：

.volume {
  position: fixed;
  top: 10px;
  left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="volume">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

我该如何解决？

Answer 1

关于Mozilla开发人员指南中的positioning：

• 绝对定位元素是计算出的位置值为绝对值或固定的元素。
• 大多数情况下，将高度和宽度设置为自动的绝对定位元素大小以适合其内容。但是，可以通过指定顶部和底部以及未指定高度（即自动）来填充未替换的，绝对定位的元素以填充可用的垂直空间。同样可以通过指定左侧和右侧以及将宽度保留为自动来填充可用的水平空间。

所以你的进度条在那里，但宽度为零。给它一个宽度，它将变得可见。

.volume {
    position: fixed;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
}