Streaming live at 10am (PST)

Simple show/hide div block positioning

Hello.

I’ve just built my first interaction but I’m having issues with the positioning. I have a graphic within a column with hotspots on top for users to reveal a small label on hover. Simple enough.

Everything is positioned relatively but it moves all over the place between viewports. Even if I were to set positions for each individual viewport, things move around when you re-size between viewpoints.

The interaction (show) also shifts the entire website below by the height of the box.

How do you position something like this? I can’t figure it out.

Thanks
Will

Here is my public share link: https://preview.webflow.com/preview/bikesenz?utm_medium=preview_link&utm_source=designer&utm_content=bikesenz&preview=c7a74ca36b3abcf3cbabd4a167da03b6&mode=preview

Preview link: https://bikesenz.webflow.io/

Hi Will,

First off, I love the site and the design. I think I may have found a solution to your problem. On all (re)sizes I can get reliable positioning as you can see (I made up where the points should stick, just for demo):

The trick is to wrap the dots in a div block and make that div block container a css grid. Give this grid/div a fixed size to prevent stretching/shrinking. I think I used 425px x 400px

5

4

Delete the image from the container and set it as the grid container’s (Div Block) background. That way you can have the image always be contained in container and not interfere with dots.

41

Configure a grid fine enough to have a grid area on all spots where you want the dots to sit. Make sure the gap is 0px. My grid is a bit rough cause I wanted to quickly try it out.

Create an area in the grid where you want to place a dot by hovering in the grid and clicking the plus:

7

Select each dot and assign it to the created area in each dot’s position settings

8

Also make sure you remove margin and other position spaces you had entered for the dots (also mind the position relative)

And this is kinda how it looks by then:

0

Good luck!

That’s fab Ben, thanks for taking the time to do that. I’ll give it a whirl when I’m back on Monday.

Best wishes,

Will

Hi Ben,

Success. I’ve managed to wrestle this in to position using your grid method. Thanks again for that.

The only niggle that I still have is the show/hide interaction moving the contents below. It still pushes all the contents down by the height of the box it reveals. I don’t suppose you know of a way to prevent this?

I mulled sticking an empty box in that does the opposite on hover but it all seems a bit glitchy and hacky. I hope there’s a more straight forward approach to achieve this.

If you have any pointers or ideas it would be appreciated.

Best
Will

Hi Will,

Do you have a link? The first thing that comes to mind is to set a positive (let’s say 99) z-index on the styling tab of the div block you are trying to elevate. The rest of the content lives on z-index 0 by default, so if you set the hovering divbox on the 99th they should not bump

Yeah, I had them on a z-index above the other elements but it still interferes with the box height.

The boxes are placed inside the right-column/graph-block below the grid. See what you think.

Here is my public share link: https://preview.webflow.com/preview/bikesenz?utm_medium=preview_link&utm_source=designer&utm_content=bikesenz&preview=c7a74ca36b3abcf3cbabd4a167da03b6&mode=preview

Preview link: https://bikesenz.webflow.io/