Держите первые два элемента списка наверху всегда

Question

Я хочу создать список, в котором первые два элемента всегда находятся в верхней части, независимо от прокрутки. Я также хочу, чтобы полоса прокрутки просто охватывала оставшиеся элементы в списке.

Я создал скрипку своей грубой идеи, которая в значительной степени использует позицию, зафиксированную в первых двух элементах списка, а затем использует прописную верхнюю часть области, которую охватывает полоса прокрутки. Но это не работает.

https://jsfiddle.net/r9dg6w6j/

EDIT:

Это должно быть сделано с помощью списка, пожалуйста.

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

Ваша идея с фиксированным положением хака близко. Попробуйте использовать margin-top вместо заполнения. Modified fiddle.

Answer 2

изменяя его маржинальный-топ работает в вашей скрипке:

margin-top: 120px;