I’m building first custom navbar (c-nav), which needs to be responsive for desktop and mobile devices. I containerized the navbar within a full-width section (c-section).
When clicked, the nav menu (background color set to red) is moved into the screen. My issue is that the nav menu is now covering the c-section and this is unwanted behavior. I am trying to solve this by assigning the c-section a greater Z-index than the menu. However, this is having no effect and I am not sure why.
Hey @wellah , you may want to look at the hierarchy of your classes (parent, children and siblings) if you want the z-index to behave accurately. Usually if you want items to stack using z-index they should be siblings element. Its usually helpful to learn more and understand certain properties through the CSS documentations of it, I have linked it below for your convenience.
Hope this gives you better insight on how you want to achieve your desired effect.
Hi @jiyong this is a bit simplified explanation and it is not entirely true. The most important part is in which stacking context elements are. If you for example have 3 siblings and 2 of them will have position: static and 1 position:relative this single element will sits on top of these two without any z-index. The best way is to understand complexity of stacking context and how is effected eg. with animations, 3D etc. etc. it is not easier things to get is complexity but basic principles are simple enough.
Hey @Stan , was trying to give a simplified explanation as it could be too overwhelming for OP since I’m not sure about the level of technical understanding he/she may have. Thought it might be better if we start somewhere simpler for OP to explore. Thank you for the clearer clarification though! You’re right, here are the principles behind stacking context for OP.
Guys, it’s been a busy week but I’d like to thank you dearly for your replies. You pointed me in the right direction as I was unaware of stacking context. It’s definitely the missing piece that I need to get to grips with. Special thanks to you @Stan for answering two of my questions in a row on this forum, your time and knowledge is not going unappreciated.
