How to force absolute element to be on top of everything else if wrapper element has overflow:hidden – HTML-CSS


I have a custom select element but the problem is that when I open it, the options are cut by the upper wrapper that contains the select and I don’t know how to solve it. I have managed to partially fix this by making options have fixed position but I don’t like the approach. Here’s the codesandbox example I made

Welcome back to the FFC forum.

Instead of using fixed positioning for the options, have you considered adjusting the z-index of the options to ensure they appear above the upper wrapper? This might provide a more elegant solution without relying on fixed positioning.
@veljkocukic

Hi, yes, I’ve tried that also everywhere I could but with no effects

If adjusting the z-index didn’t work, you might want to try setting the overflow property of the upper wrapper to visible. This could allow the options to display properly without being cut off by the wrapper. Additionally, ensure that the positioning of both the select element and its options is relative to the parent container rather than absolute or fixed.
@veljkocukic



Source link

Leave a Comment