Eu me pergunto se alguém encontrou uma solução para isso?

Eu estou procurando uma solução para anexar um elemento para o topo de um contêiner de rolagem

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

todos os "elementos"position:relative,

o contêiner tem o seguinte CSS:

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

Eu quero o cabeçalho para ficar no topo do recipiente, independentemente da sua posição de rolagem e os elementos de rolagem por baixo.

o CSS até agora:

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

Todos os elementos são elementos de bloco e não posso mover o cabeçalho para fora do contêiner. jquery não é uma opção neste momento.