How to get this result (see image) absolute-relative problem

Design help General
1

Hi,

I want to get this result:

image
image1223×786 129 KB

As you can see on my website in webflow, the image placement is not entirely where I want it. It’s too high and too close to the little menu. I don’t know exactly how to get the result I want without messing everything up.

Anyone know the answer?

2

Hi there,

To precisely position an image in Webflow, you can use absolute positioning. Here’s how to set it up:

First, ensure the parent element (the container holding your image) has its position set to “Relative” in the Style panel. This creates a positioning context for your image.

For the image itself:

  1. Select the image element
  2. In the Style panel, change Position to “Absolute”
  3. Use the position values (top, bottom, left, right) to place the image exactly where you want it
  4. Adjust the z-index if you need to control how the image overlaps with other elements

Keep in mind that absolute positioning removes the image from the normal document flow. For responsive designs, you may need to adjust the position values for different breakpoints to maintain the desired layout across all devices.

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

3

I know this but my structure is a bit more complex. Anyone know the solution?

4

HTML is based on a box-model layout, so think of your layout as boxes.

Let’s say you have 3 areas;

  1. Top nav
  2. Left text
  3. Right image

Here’s a box model layout that gives you some control and options for responsiveness.

DIV
  top nav contents
DIV grid ( 2 col, 1 row ) 
  DIV
    left richtext element 
  DIV ( relative position ) 
    image ( absolute, bottom 30, left 30 )  
    background image ( absolute, bottom 0, left 0 )

Your shadow image there can be a separate image, I’ve called it background image here..

The only layering bit you need is for that stacked image presentation, so you can see the parent DIV container is relative, and the two image are absolute. Both are positioned relative to the bottom left corner.