Putting header below main and using reversed flex direction could have accessibility implications.
Just put ::after pseudo-element on header and add your shadow there.
Couple more lines of code but better solution overall...I think...
I was not sure about the accessibility implications... I also thought I tried the ::after pseudo element, but it did not work as expected, because the below element will still be over the pseudo element. But not totally sure about that anymore, maybe I am going to try at one point again.
Putting header below main and using reversed flex direction could have accessibility implications.
Just put ::after pseudo-element on header and add your shadow there.
Couple more lines of code but better solution overall...I think...
I was not sure about the accessibility implications... I also thought I tried the
::afterpseudo element, but it did not work as expected, because the below element will still be over the pseudo element. But not totally sure about that anymore, maybe I am going to try at one point again.Here is edited codepen
Okay, I also already made bad experiences with
position: absolute, so I tried to not use that one as well.