DotNetNuke Tips & Tricks

Thursday, October 6, 2011 by Cuong Dang

Addressing Positioning and Z-index Issue in DotNetNuke 6.0

Filed under: Tips & Tricks, UI and UX

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.

Graphical z-indexImage 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


blog comments powered by Disqus