Z-index of popup

[Pablo]

On my website www.da-vinci-groep.be I made a popup on hovering over the icon ‘brainstormen’ (http://prntscr.com/k0f0vq). Although I have set the Z-index of the popup to 10, it falls behind the icon below with a Z-index of 1. What causes this and how can we resolve this issue?

Kind regards,
Pieter

[nabeel]

Hi Pieter,

Thanks for writing in! To fix the issue, just set the z-index of your second row to 0.

Here is a good a good link to learn more about z-index https://stackoverflow.com/questions/14391208/how-does-z-index-really-work

Cheers!

[Pablo]

@Nabeel

https://stackoverflow.com/questions/14391208/how-does-z-index-really-work

Hi Nabeel,

unfortunately that is not a good solution, because every icon will get a popup eventually. If I’m not mistaking, every column has a z-index of 1. So why doesn’t it work if I set the z-index of the popup to 10?

Anyway, can you think of another solution to make it work?

Kind regards,
Pieter

[rad]

Hi @Pablo,

Z index only applies to the relative elements, the z-index of other elements belong to other parents, structure, or outside the current is not affected by current element’s z-index. Hence, you’ll have to do it manually and do some trial and error. And because it’s something you can’t predict, it’s safer to apply 9999999 z-index to cover whatever needs to cover.

I checked your site and looks like it’s the limitation of your popup. Is it custom? It doesn’t have absolute or fixed positioning so it’s only normal for it to be covered by next elements (1st element = 1 - z-index, 2nd element = 2 - z-index, and so on, and browser do that automatically).

You should make the popup similar to actual popup like modal with responsive positioning for it to work. Or try using a different popup.

Thanks!