Unwanted overlaying of sections

Design help Layout & Design
1

Hi everyone, hoping to get some help with a layout problem I’ve hit.

My page (Home) contains several sections. Section-About contains an image-overlay-wrapper Div. This is set to relative. Then a nested image and container (for paragraphs) within that are set to absolute. This gives me a full-width image with text overlay that I am looking for. I believe it’s a standard design pattern.

However, the next section below Section-About in the page structure appears from the top of Section-About. So that section is overlaid too (if I add more sections, they do at least stack down the page as normal, just starting from the wrong point - it’s as if Section-About doesn’t exist layout-wise). I’ve left a final section containing a lorum ipsem paragraph so you can see the problem.

There are other elements on the page using relative positioning (Navbar default setting; Background Video default setting)

Any ideas? Appreciate any help. Here is the read only LINK.

Thanks

1 Like
2

Hi there,

Fixed position elements like navbars can cause content overlap issues on your page. To resolve this:

The best practice is to add padding to the Body element equal to your navbar height. This creates the necessary space and prevents your content from hiding behind the navbar. If you’re also experiencing unexpected spacing between sections, this might be due to collapsing margins when using absolutely positioned elements.

Instead of using top margin on your first section, add the appropriate padding to the Body element. This approach provides more consistent spacing and helps maintain proper content positioning throughout your site.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Hey @dadbod ,

Can you set a specific height for the image-overlay-wrapper element? For example, I set the height to 500px as highlighted in the screenshot below (you can set it as per responsive design requirements, this is just an example).

With that the issue is solved and I am able to see the lorem ipsum section stack after this Section-About rather than it being overlapped by the image.

AJ - Img Overlay Wrapper
AJ - Img Overlay Wrapper1857×817 175 KB

Hope this helps.

1 Like
4

Thank you all for your advice.

I now know about collapsing margins - thanks.

@AJ_Dev - yes, your solution works thanks. I ended up going for a bunch of Div blocks to achieve similar layout. I prefer this because I didn’t need to set a fixed height, so there’s less to adjust at other breakpoints. But I’m not a designer, so maybe that’s the wrong way to look at it :person_shrugging: So I’m going to mark your suggestion as the solution.

Really appreciate the help.

1 Like
5

Your Section-About has no height because all its children are absolutely positioned, so the next section overlaps. :white_check_mark:

Fix:

  • Add a height (e.g. min-height) to Section-About, OR

  • Wrap your absolutely positioned elements in a relatively positioned container that has height.

1 Like