I'm trying to create a responsive navbar with a drawer of links that comes out when the burger menu is open, but the Image components ended up overlapping it (and presumably everything else).

Changing the z index of the Image components and other elements didn't work, so after some search, I realised that Next's Image component applies position absolute by default when we're using the "fill" property (https://nextjs.org/docs/app/api-reference/components/image#fill), and it's causing the images to overlap the navbar and other elements

How do we work around it such that the navbar appears above the Next Image components with the "fill" property? I'm hoping to avoid position absolute (or any position at all) hell.