In my website I made two regions sticky (following) by giving them position: fixed.
In desktop display it is the “headline” region.
In Mobile display it is the “phocon” region.
When surfing from Desktop you will immediately see the region covering the logo-area.
When surfing from Mobile you could see the problem when scrolling to the end of page.
Both regions, from the moment they get position: fixed, “swallow” content inside them them (they cover adjacent content).
I can fix that with padding-top (in desktop) or padding-bottom (In mobile), given to adjacent regions and “unswallow” them back to their place, but this solution is problematic in management display (it can be solved by doing to opposite coding in the suitable management-display selector, but I do wonder if there is a more minimalist solution).
I also tried to wrap both areas with divs that got position: relative, but it didn’t help.
HTML-only level solutions like are completely out of the order — I am looking for a CSS only solution. Would thank you for your take on this.
I thought that was the intention, to push down to clear the fixed element.
There is a new css position for this, sticky which makes sticky elements very easy to create. But unfortunately browser support for it is not universal yet.