Overlapping Elements

Design help General
1

I am new to Webflow and I need help with this overlapping layout. I am sure its simple to do, I’m just not sure how. This was designed in Figma. I want to be able to animate the gray box so I think it should be a separate div block? Also I want the image to stretch to the edge of the screen.

Screenshot (6)
Screenshot (6)2159×2102 521 KB

2

Hey Darcy, i’ll try to break down the layout structure.

  1. Create a div for the whole section. Give it display: flexbox and position: relative
  2. Insert 3 divs:
    1. Position: Relative; width: 65%; Padding-left: XX to align the text For the headings
    2. Position: Relative; width: 35% For the image
    3. Position: Absolute; width: 400px; height: 500px; right: 10% for the grey box.

Do adjust the numbers according to your site, but I would structure it like that.

3

Ok I tried that and its a little clearer now. What I’m trying to do is make it so most of the content is a set width (or something like that) and then there’s a few images and background boxes I want to extend to the edge of the the screen depending on your screen size. More of the image will show depending on your screen size. The image that’s on this page is only showing a small part of it but i want it to extend depending on your screen size. I’m not sure how to explain my thought but I’ll put a screenshot of the whole Figma page and the image with the tools so you can see what i am talking about.

Home Page
Home Page1440×5164 2.33 MB

IMG_1337
IMG_13374032×3024 2.57 MB

4

Okay, I have a better image on what you’re looking for, try to follow this instead.

  1. Create a Parent div for the whole section. Give it width: 100% and position: relative;
    note: let this div fill the entire width.
  2. Create a div inside the section. Give it max-width: (your max-width) and position: static (This will make sure the position: absolute items follow your Parent div.
  3. Insert 3 divs:
  • Position: Relative; width: 65%; Padding-left: XX to align the text For the headings
  • Position: Absolute; width: 35%; right: 0; For the image. Edited this to absolute and right: 0 so that its flushed to the right of the Parent div
  • Position: Absolute; width: 400px; height: 500px; right: 10% for the grey box.