Elemento de posición CSS "fijo" dentro del contenedor de desplazamiento

Question

Me pregunto si alguien ha encontrado una solución para esto?

estoy buscando una solución para fijar un elemento a la parte superior de un recipiente de desplazamiento

HTML:

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

todos los "elementos" tienen position:relative,

el contenedor tiene la siguiente CSS:

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

quiero que el encabezado permanezca en la parte superior o f el contenedor, independientemente de su posición de desplazamiento y los elementos que se desplazan por debajo.

el CSS hasta ahora:

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

todos los elementos son elementos de bloque, y no se puede mover la cabecera exterior del recipiente. jquery no es una opción en este punto.

Answer 1

La solución en este caso sería la de hacer estallar el título fuera del elemento de desplazamiento:

<div class="header">title</div> 
<div class="container"> 
    <div class="element">......</div> 
    <div class="element">......</div> 
</div> 

Aunque probablemente debería tener elementos mejor semánticas si es posible (sólo una suposición aquí):

<h3>title</h3> 
<ul> 
    <li>......</li> 
    <li>......</li> 
</ul> 

Answer 2

jQuery UI agregó un método de utilidad position() solo para este propósito que haría su vida más fácil.

$("#someElement").position({ 
    of: //Element to position against, 
    my: //which position on the element being positioned, 
    at: //which position on the target element eg: horizontal/vertical, 
    offset: // left-top values to the calculated position, eg. "50 50" 
}); 

Definitivamente me ayudó.

Answer 3

Creo que su solución pase con position:sticky. Parece que es como position:fixed, pero respeta la posición relativa de su padre.

Desafortunadamente esta es una característica experimental, y solo es compatible con Chromium. Puede ver más detalles en this test page.

La solución pure css que me viene a la mente es con un pequeño cambio en el marcado. Puede configurar un contenedor solo para los "elementos" como este:

<div class="cont_elements"> 
     <div class="element">......</div> 
     ..... 
</div> 

Y dé el desbordamiento a este contenedor interno. Ahora, tu encabezado queda en la parte superior.

Here's a working demo.