Z-Index and the SharePoint Calendar popup

When styling a SharePoint site you may want to use CSS, DIV etc. to design your site according to your branding needs.

When applying CSS and DIVs to a Publishing site you pretty much have “Full Control” but when mixing a Publishing Site and a Collaboration site you may run into some challenges.

I discovered that my announcement lists did not expand the calendar popup correct. The calendar was cut off by another layer.

So I checked the rendering and discovered that the calendar popup is a IFRAME that has it’s z-index to 101. The solution was to set the z-index on my other layers. And decrease the z-index on my layers that where above 101… I also configured the containing layer to have overflow:visible

Now it renders correctly.