Content is swallown into position:fixed headers

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.

What exactly is the problem with adding margin/padding to clear the fixed elements?

The areas seems pushed downwards when this padding applied. Anyway, if there is no other way I will use that solution as mentioned above.

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.

Sorry, I mistakenly wrote “push downwards”; I meant push upwards (if given to #header which is one region down).

Can only decide which of the 2 to use… Thanks.

For me it works if I add the the #header

margin-top: 2em;

You will want to reset it to back 0 in the mobile view.

And for the #footer

margin-bottom: 4.5em;

Only in mobile view.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.