Bootstrap Progressbar Affix 有效但仍保留在所有其他组件下

Question

想要的结果： 我使用了一个进度条，我希望它在向下滚动时保持可见。

采取的行动： 我在包含进度条组件的整个部分上使用了 Affix。

当前结果： 好像可以，但是滚动条在所有其他组件下面，所以滚动时会消失在它们后面。

<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .affix {
          top: 1;
          width: 100%;
      }

      .affix + .container-fluid {
          padding-top: 70px;
      }
    </style>
    <script>
      $(document).ready(function(){

              });
    </script>
  </head>

  <body>
    <div class="container">
      <h2 class="text-center">Title</h2>
      <div class="panel-group" id="accordion"></div>
    </div>
    <div class="section" data-spy="affix" data-offset-top="20">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="progress" id="progressbarid">
              <div class="progress-bar" role="progressbar" style="width: 0%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12"></div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="panel panel-primary" id="keystone-sectionid">
              <div class="panel-heading">
                <h3 class="panel-title">Section1</h3>
              </div>
              <div class="panel-body"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="panel panel-primary" id="compute-sectionid"></div>
            <div class="panel panel-primary" id="glance-sectionid">
              <div class="panel-heading">
                <h3 class="panel-title">Section2</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <div class="panel panel-primary" id="cinder-sectionid">
              <div class="panel-heading">
                <h3 class="panel-title">Section3</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <div class="panel panel-primary" id="heat-sectionid">
              <div class="panel-heading">
                <h3 class="panel-title">Section4</h3>
              </div>
              <div class="panel-body"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

这是 jsfiddle 中的行为：
https://jsfiddle.net/AJNOURI/07ckpj1h/

Answer 1

应该使用 CSS Stacking Elements in Layers Using z-index Property z-index

  .affix {
      top: 1;
      width: 100%;
      z-index: 1;
  }

已更新 https://jsfiddle.net/AJNOURI/07ckpj1h/2/

Bootstrap Progressbar Affix 有效但仍保留在所有其他组件下

Bootstrap Progressbar Affix works but remains under all other components

twitter-bootstrap

affix