css - 固定 float 分区

Question

我想做一个 div "Scroll"，即使在滚动过程中，它也会留在一个地方。这是我的代码:

<div class="container-fluid">
      <div class="Scroll">
        <div class="Down">
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="Search">
          </div>
          <div class="form-group" style="display:inline-block;width:300px;">
            <h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4>
            <input type="date" class="form-control" style="width:250px;" class="form-control" />
            <h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4>
            <input type="date" class="form-control" style="width:250px;" class="form-control" />
          </div>
        </div>
      </div>
    </div>
    <div class="Down">
      <table>
        <thead>
          <tr>
            <th>NAME</th>
            <th>DATE</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.date}}</td>
          </tr>
        </tbody>
      </table>
    </div>

CSS 文件:

.Scroll {
  position: fixed;
}
.Down {
  clear: both;
}

Answer 1

你忘记给 .Scroll 添加定位值了

.Scroll {
  position: fixed;
  top:15px;
}

检查我的版本:

.Scroll {
  position: fixed;
  top:15px;
  background:red;
}
.Down {
  clear: both;
}

.container-fluid {
  background:purple;
  display:inline-block;
  width: 100%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container-fluid">
      <div class="Scroll">
        <div class="Down">
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="Search">
          </div>
          <div class="form-group" style="display:inline-block;width:300px;">
            <h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4>
            <input type="date" class="form-control" style="width:250px;" class="form-control" />
            <h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4>
            <input type="date" class="form-control" style="width:250px;" class="form-control" />
          </div>
        </div>
      </div>
    </div>
    <div class="Down">
      <table>
        <thead>
          <tr>
            <th>NAME</th>
            <th>DATE</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.date}}</td>
          </tr>
        </tbody>
      </table>
    </div>