CSS position element “fixed” inside scrolling container

Question

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.