Relative positioning doesnt work

i have a seach bar, and when i relative position it onto a picture, the white space is left behind from the box its in, is this fixable?

Hi @hogarth_heathan,

To be able to look into this for you, could you please provide us with a Read-only link to your website?

Cheers!

sure thing

Webflow - Hogarth's Groovy Site

Hi @hogarth_heathan,

That’s the expected behaviour of relative positioning - Position | Webflow University :

An element set to relative is positioned relative to its normal position. A relative setting without other positioning attributes added (top, left, bottom, or right), will not be affected. This is because it’s relative to itself exactly as if you left it as static. Setting the top, right, bottom, and left properties of a relative element will move it away from its normal position. Other content won’t adjust to fit into any gap left by the element.

Here’s an alternative way to place the search bar there: CleanShot 2022-10-06 at 14.55.39 · CleanShot Cloud

Hope this helps!

thanks, yea i was trying to get it on top of a map element, and i dont think i can do that by putting it inside of a map element. any ideas? cuz im stuck on how to do that without the ugly white space left behind.

https://preview.webflow.com/preview/hogarths-groovy-site?utm_medium=preview_link&utm_source=designer&utm_content=hogarths-groovy-site&preview=29409533eb0ef75730f6e739a5d73a82&workflow=preview

Hey @hogarth_heathan,

Looks like you got it working!

Let me know if you have any issues with it.

yea thanks, i just moved the div below up by 50px same size as the white space, it feels janky and like im cheating, but i didnt know what else to do.

Hey @hogarth_heathan , I haven’t looked at your demo, so I might be missing what you’re trying to do- however when you’re trying to position an element over top of and inside of another element, the favored CSS approach is to position the outer element as relative and the inner elements as absolute.

Here’s a demonstration of that, click the top right button to see the designer view;

https://layout-demos.webflow.io/responsive-image-annotations

thanks for the tip, but i dont fully understand absolute positioning, when i use it on the element im interested in, it moves it to an element i do not want it positioned to, imagine its in the middle of 2 bigger elements, it goes to the top one, when i want it at the bottom one.

Google is your friend there. You’ll find a ton a great tutorials that will help you understand better.

Learning this is important because Webflow does a good job of keeping those underlying mechanics uncontaminated - to use Webflow properly, you need to understand web design fundamentals so you can design “with the grain” of how the web works, rather than struggling against it.