Streaming live at 10am (PST)

Div hiding behind other divs


#1

Hi all,

I am creating a flexbox grid that is interactive. My ambition is to get a div with info to pop-up adjacent to the one that you click.

I'm having trouble - the div that i want to popup is in the right location but is hiding underneath the parent grid and is randomly flickering in and out when I hover over different divs.

Does anyone know ways to bring it to the front so it is visible?

Here's the link: https://preview.webflow.com/preview/toolful?preview=277e848c83b5cfdc6505f526e3e67839

Another related question:
- How do I create an interactive cross to close the box?

Thanks so much,
Rachel


#2

Hi Rachel,
I've been looking at your 'Home 2' page. Here's what I think you have to do in order to get the pop-up (class 'Special') to be on top of the grid:

• Set your 'Div blocks' element to Relative position

• Then, move the Special element out of the current parent element B1. Move it up the folder structure so that it's a child of 'Div blocks'. All other pop-ups can live there also. Like so:


This tutorial for a pop-up box shows you how to create a Close button.

Hope that helps.


#3

Hey @spirelli thanks so much, that really does help. Thank you for taking the time to answer. Rachel


#4

Hi @Rachel1 thanks so much for posting!

First you will want to set the element parent grid to position: relative as @spirelli mentioned.

Doing so you will see the abosolute div move as it is now positioned relative to parent grid rather than the body. You may have to adjust the position after doing this step.

You can then give the absolute div a z-index value. anything greater than zero will work in this case, but you can set it at 10 to be sure it will sit on top of all other content.

I hope this helps!


#5

Hey @Brando and @spirelli, thank you for your help.

I've understood more about positioning relative so thank you. I'm getting stuck by the interactions. Each of the blocks (Block 1) has some text (More info) that when clicked should popup the interaction called 'Special' or Special 2, Special 3 etc...

Each Block 1 has custom text within it and each 'Special' block has custom text, position and a different trigger. I am having trouble streamlining this process and it seems when I change the interaction on one, it changes it on another (very frustrating).

This is what I would like to achieve:
1. 'More info' text - enlarge on hover
2. 'Special' box fade appear on click of More Info
3. Cross arrow in corner closes on click
4. I don't want more than one pop-up open at once

Do I need to custom name each 'More info', 'Special' and 'close' button on the 12 box grid in order for this to work and is there a more efficient way? It is confusing me a lot, so any suggestions would be really helpful.

You'll notice the interactions works superficially for Special as I would like but not Special 2 and I can't understand why. There must be a simpler way than having to have 3 custom interactions per block popup.

https://preview.webflow.com/preview/toolful?preview=277e848c83b5cfdc6505f526e3e67839

Would really appreciate your help,
Thanks,
Rachel


#6

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