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.
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