Streaming live at 10am (PST)

Trying to absolute position an image


#1

Hi,

Love webflow and am learning relative and absolute positinging however I am having an issue, on the homepage you will see there is a picture of a tractor on the right hand side, I am trying to place an image of a better quality youtube play button over the centre of the image in a div, using absolute I can get the image to the centre but then if I scale the webpage the image flies all over, I have tried making the lightbox link and div 10 relative but makes no difference, am I doing it the correct way? (Obviously not)

Thanks for any help offered

John


Here is my public share link: https://preview.webflow.com/preview/wsh-old?preview=ea001a792a1800a52e9342a227582011


#2

Hi, absolute positioning isn't super complicated but there are things to know.

You can read here on how to master it. It's important, after that you'll be able to do anything you want.


#3

The thing that always catches me is...
and @vincent reminded a couple times :slight_smile: is

the parent of element you want to be position:absolute
needs to position:relative

That's the first thing I always check for now... thanks to @vincent


#4

Hi Vincent - thanks for that - got it (but missing something) if you can take a quick look at my preview I have positioned on the desktop view relative to div 10, in the other view the image still does not centre, do I have to manually ajust for each breakpoint, if I do (and ive tried it) when in mobile view and if I shink the page the play botton flies off to the top left, this is the bit I dont understand....

Any suggestions....

Cheers John


#5

Precisely, it need to be positionned, or have a position value that is not static. So relative will work, absolute or fixed will work too (and to go further into CSS, inherit will work depending on what its heritage is). Static (Webflow's default positioning value) won't work and initial most likely won't work too.


#6

There's something I don't fully understand, why the values don't get to zero when you try to reach the corners in absolute... maybe the result of fiddling too much, ifg you start from scratch it could be better

Anyway, look how I zeroed the values manually and placed the image in the center manually too, it seems it doesn't fly anymore.


#7

Thank you so much for your time and the video Vincent. Very much appreciated.... :grinning:


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.