I am currently testing some client skins for the upgrade to DNN 7 as both default.css and the Module action icons have changed since DNN 6. I have a z-index issues and here's what I found out and how I fixed it.

The main issue I found is that the Module action Icons are visible through any menu drop downs you might have.
Here's an example:






It took me a while to figure out why this happens as the Icons are implemented very different from what I would expect.

 

 

Module Action Buttons in DNN 7

In DotNetNuke 7, the icons for the module actions are injected at the bottom of the page and then (absolute) positioned in the dashed box above the Module using Javascript.
I don't know why, but IMO this is not needed and a potential risk for positioning issues as the position is calculated in JS.
We had these kind of issues before DNN6 too when a skinner used absolute positioning in his skin. I think I have already seen a similar issue in the Forums on DNN 7, but at the time I did not realise what could be causing it.



IMO injecting server side directly above the module would be better or inject the same html with jQuery in the dashed drag-able block above the module.
But, let's focus on the solution...

 

 

 

 

Solve the Issue

The reason this is an issue is this line in /admin/menus/ModuleActions/ModuleActions.css

 

 

 

 

Which causes the z-index issue.
It's an absolute positioned element amongst not positioned elements and it has a high z-index. Because of this it's always on top of the other elements.

I don't think this is really needed.
By simply overwriting this in you skins CSS, you can solve this z-index issue:

form .actionMenu ul{z-index:auto !important;}

Result: