Addressing Positioning and Z-index Issue in DotNetNuke 6.0

Since the release of DotNetNuke 6.0, there have been quite a few conversations regarding z-index issues around navigation and the content area within a page.

If you look closely in the overhaul process of DotNetNuke user interface, it's incorporated jQuery UI as the core enhancements in most of the controls.

The framework also specified the z-index values (in default.css) mostly to control the positioning and calculation of the new module actions menu height and width.

Image source: Smashing Magazine

So if you run into issue with elements being overlapped each other, chances are the z-index needs to be addressed. And they can be overridden in skin.css file.

Here's the default values:

• Modal popup: 1000 - up
• Control panel: 950 – 999
• Module actions: 900 – 949
• Everything else (including content): 0 – 899

To learn more about z-index and positioning in CSS, please read more at Smashing Magazine