Sticky position not 'pushing' other sticky elements
Sticky position not 'pushing' other sticky elements I feel like there is an obvious answer here but I cannot work out why – in this mock-up example below – #one is not 'pushed' up by #three ? #one #three Looking at the last example given by MDN it appears that the sticky elements push one-another out of the window whereas here #one & #three seem to just slide over each other. I feel like it is something to do with the heights(?) but any help with explaining this would be appreciated! #one #three * { box-sizing: border-box; margin: 0; padding: 0; } h1 { text-align: center; color: #000; font: bold 20vw Helvetica, Arial, sans-serif; } .sticky { position: sticky; top: 0px; } #start { width: 100%; height: 50vh; background: #fff; } #one { height: 100vh; width: 100%; background: url('https://picsum.photos/900/1200/?random'); background-position: center; background-size: cover; } #two { width: 50%; position: relative; height:...