用css固定在顶部的盒子的位置

Question

我正在将css实现到我的盒子列表（命名为敏捷板）固定到顶部，目前我有5个这样的盒子：

<div class="nits-agile-board">
    <div class="ibox">
    </div>
</div>
<div class="nits-agile-board">
    <div class="ibox">
    </div>
</div>
<div class="nits-agile-board">
    <div class="ibox">
    </div>
</div>
<div class="nits-agile-board">
    <div class="ibox">
    </div>
</div>

我已经定义了这样的css：

.nits-agile-task {
    display: inline-block;
    position: relative;
    width: 350px;
    padding-right: 15px;
    padding-left: 15px;
}

在我的控制台中，它看起来像这样：

现在这样做，我得到的输出是这样的：

现在，当我在社区中处理其他问题时，我将我的css更改为：

.nits-agile-task {
    display: inline-block;
    position: fixed;
    width: 350px;
    padding-right: 15px;
    padding-left: 15px;
}

但是现在它覆盖了所有的盒子，只看到最后一个盒子，剩下的盒子没有显示，当我在我的控制台中看到所有盒子的HTML都存在于那里时。

，控制台如下所示：

我怎样才能做到这一点。