{"id":550,"date":"2012-08-03T23:58:12","date_gmt":"2012-08-03T18:58:12","guid":{"rendered":"http:\/\/www.esearing.com\/v2010\/?p=550"},"modified":"2012-10-07T19:09:11","modified_gmt":"2012-10-07T14:09:11","slug":"cflayout-divs-and-z-index-order","status":"publish","type":"post","link":"https:\/\/www.esearing.com\/v2010\/2012\/08\/cflayout-divs-and-z-index-order\/","title":{"rendered":"CFLayout, Divs,  and Z-index order"},"content":{"rendered":"<p>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. <\/p>\n<p>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&#8217;t the z-index value has no impact. You must have both.<\/p>\n<p>Menu is &lt;div id=&#8221;#nav&#8221;&gt;&#8230;<br \/>\n#nav {position: absolute; z-index 1000;}<\/p>\n<p>&lt;cflayout name=&#8221;myTabsName&#8221; type=&#8221;tab&#8221;&gt;&#8230;<br \/>\n #myTabsName {position: absolute; z-index 10;}<\/p>\n<p>CFChart, CFWindow, and other elements may be affected by this same issue. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/www.esearing.com\/v2010\/2012\/08\/cflayout-divs-and-z-index-order\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,16,8,21,3],"tags":[39,36,35,38,37],"class_list":["post-550","post","type-post","status-publish","format-standard","hentry","category-code","category-coldfusion","category-css","category-problems-fixes","category-web-development","tag-cfchart","tag-cflayout","tag-cfselect","tag-position-elements","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/comments?post=550"}],"version-history":[{"count":2,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/550\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/550\/revisions\/589"}],"wp:attachment":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/media?parent=550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/categories?post=550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/tags?post=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}