Absolutely positioned photo overflows section

Hi,

I’ve been searching the forums for ages and I can’t find an answer to my question.

I would like to have the header text partially overlap the image as I have it here (I’m basically happy with how it responds/scales), but to do that I used absolute positioning which means the section doesn’t respect the height of the image and the next section overlaps the hero section.

Is there another way to achieve the same layout or to modify the way I have it so the section respects the height of the absolutely placed image?

Thanks in advance for any help!

Naomi


Here is my site Read-Only: https://preview.webflow.com/preview/hello-clay-studio?utm_medium=preview_link&utm_source=dashboard&utm_content=hello-clay-studio&preview=6916b006327779500c2b2ae78a4373c9&mode=preview

(how to share your site Read-Only link)

Welcome to the community!

Absolute positioning is one of two types that allows the element to “break” itself out of the document flow (the other being fixed), but most of the time you can get away with using either negative margins or relative positioned elements to achieve the same effect.

Is this more in line with what you’re looking to achieve?

Thank you so much for responding! I’d be alright with changing the layout a bit. What you’ve done looks pretty darn good. How did you do it?

And out of curiosity is there a way to replicate my exact layout?

Oh of course! My apologies, I just took a stab at the end result based on what you mentioned, but if you had a mockup (or reference) you were going off of it would be possible to replicate that instead.

@mikeyevin No worries! If I wanted to keep the headings at the top edge of the hero photo like the screenshot below is that possible?

But even knowing how you did that first layout with the text a bit lower would be great!

Thank you again for responding! I think based on your comment about negative margin I figured it out :slight_smile:

Super glad to hear you were able to get this working! I meant to record a quick video with both options explained but had a busier than expected weekend.

Let me know if you have any other issues, otherwise good luck with the project :v:

No worries at all! I’m really grateful you responded and it helped just to know it was possible using relative positioning and negative margin. :smiley:

1 Like