React-dates: position absolute on Week headers places them on top of everything.

[revant9c]

I am using custom month and and year drop downs or DayPickerSingleDateController. Week headers are inside one wrapper(div) and rest of the calendar inside another wrapper(div). Week headers are absolute positioned and they are always on top of everything. So when the drop down is open, the week headers are on top of them. Here's an image:

I have tried almost everything but can't make it work.

[deep-coder]

This is because z-index of Week div is greater than the calendar div to make week headers visible as week div is absolute positioned . There is way to solve it not sure this is the right way but it will work. You need to increase the z-index of calendar wrapper but this will change the stacking context and week div will get hide behind calendar wrapper. So to make week header visible, you need to make background-color of calendar wrapper transparent.hope this helps :)

[revant9c]

@deep-coder I have tried that before. I have played around with z-index a lot but doesn't seem to work.

[jessy1092]

I set the follow css. It is work for me.

.CalendarMonthGrid {
  z-index: 2;
  background: transparent;
}

.CalendarMonth {
  background: transparent;
}

If want to click the navigation. Should add extra css.

.DayPickerNavigation {
  z-index: 3;
}

[revant9c]

@jessy1092 sweet! It works. Thanks!

[Zara603]

.CalendarMonth {
background: transparent;
}

Thanks so much, saved me