CFLayout, Divs, and Z-index order

I ran into a problem that sometimes affects various Coldfusion elements designed to make life easier. I created a drop down mega menu which works beautifully, untill I added a CFLayot Tab box to the page. The menu would go behind the tabs rather than appear in front of it.

The solution deals with two CSS properties. You need to make sure that the divs are both positioned, and have a correct Z-index value so that the menu can appear above the tabs. the lower the value of z-index the lower the stack ranking. Note: Z-index: -1; will make the tabs inoperable. If one is positioned and the other isn’t the z-index value has no impact. You must have both.

Menu is <div id=”#nav”>…
#nav {position: absolute; z-index 1000;}

<cflayout name=”myTabsName” type=”tab”>…
#myTabsName {position: absolute; z-index 10;}

CFChart, CFWindow, and other elements may be affected by this same issue.

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, Coldfusion, CSS, Problems & Fixes, Web Development and tagged , , , , . Bookmark the permalink.