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:

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:

      
......
      .....

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

Here's a working demo.