CSS position element "fixed" inside scrolling container

Question

i wonder if anyone has found a solution for this?

i am looking for a solution to attach an element to the top of a scrolling container

HTML:

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

all "elements" have position:relative,

the container has the following CSS:

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

i want the header to stay on top of the container, independant of its scrolling position and the elements scrolling underneath.

the CSS so far:

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

all elements are block elements, and i can not move the header outside of the container. jquery is no option at this point.

Answer 1

I think your solution pass with position:sticky. Seems it's like position:fixed but respects the relative position to his parent.

Unfortunately this is an experimental feature, and is only supported in Chromium. You can see more details in this test page.

The pure css solution that comes into my mind is with a little change of the markup. You can set a container only for the "elements" as this:

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

And give the overflow to this inner container. Now, your header sticks at top.

Here's a working demo.