html - 始终将列表的前两项保持在顶部

Question

我想创建一个列表，无论滚动如何，前两项始终位于顶部。我还希望滚动条只包含列表中的剩余元素。

我根据我的粗略想法创建了一个 fiddle ，这几乎是在前两个列表项上使用 position fixed ，然后在滚动条包含的区域上使用 padding-top 。但它不起作用。

https://jsfiddle.net/r9dg6w6j/

编辑:

请务必使用列表来完成。

HTML:

<ul class="list">
  <li class="item" id="first">HELLO</li>
  <li class="item" id="second">HELLO2</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
</ul>

CSS:

#first {
  color: red;
  position:fixed;
  top: 20px;
}

#second {
  color: blue;
  position: fixed;
  top: 70px;
}

.list {
  height: 200px;
  overflow-y: auto;
  padding-top: 70px;
}

.item {
  color: green;
  height: 50px;
  width: 100px;
}

Answer 1

您的固定位置 hack 的想法很接近。尝试使用 margin-top 而不是填充。 Modified fiddle.