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.

Answer 2

Here's the solution I came up with using position: sticky (so no IE unfortunately):

https://codepen.io/waterplea/pen/JjjMXzR

The idea is to have a 0 height sticky container on top of the scrolling container, so it sticks but doesn't push any of the content below and then position your stuff absolutely inside it. This way you have width but do not have height, so you can only kinda position something from the top like I did with button in my example.

EDIT: Found a way to make it have 100% height and not push the content below using float. Updated the codepen. Had to use calc(100% - 1px) because of this bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1612561