I have the following CodePen I'm working on: https://codepen.io/eliseodannunzio/pen/ZEyGvOy, which has a grid-based calendar set up, and I'm attempting to create a configurable dropdown. As I'm experimenting with CSS variables, I'm using a list of labels and radio buttons to pass specific values. I'll be setting up this list to be visible via a checkbox a little further down the line.
My concern is not the choice of using radio inputs and labels... but that the inputs are being obscured by the calendar as seen within the CodePen. I find this strange as I've set up z-indexes for the inputs and labels as 10, which is higher than the values set up for within the .calendar-wrapper classed element and its children, which are all set with a z-index of 0...
Can anyone tell me what could be causing this glitch and how to render the CSS/HTML to ensure that this list of centuries overlaps the grid in the .calendar-wrapper element?
Thanks in advance...
If I understood your problem correctly, the only thing you need to do is add
position: relative;
for label elements, as z-index only affects elements that have a position value other than static (the default).