{"id":3463,"date":"2013-10-01T18:04:59","date_gmt":"2013-10-01T18:04:59","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=3463"},"modified":"2013-10-01T18:08:58","modified_gmt":"2013-10-01T18:08:58","slug":"working-with-z-index-in-css","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/working-with-z-index-in-css.html","title":{"rendered":"Working With Z-Index In CSS"},"content":{"rendered":"<p style=\"text-align: center;\"><em>In CSS, z-index is the order of appearance of one layer over the other, the higher the z-index the higher priority of the layer above the lower z-index displays. For example, on my theme, I made header to be fixed with z-index:9999 and my shadowbox overlay z-index:999 . So, on a small display like 1024&#215;768, there&#8217;s not enough room for both header and the shadowbox overlay, the shadowbox display will be UNDER the header because the z-index is lower.<\/em><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" title=\"shadowbox is under the header\" href=\"\/media\/techs\/zindex\/sm_zindex.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"shadowbox is under the header\" alt=\"shadow box is under the header\" src=\"\/media\/techs\/zindex\/tn_zindex.jpg\" width=\"250\" height=\"153\" \/><\/a>\u00a0 \u00a0 \u00a0<a class=\"preview\" title=\"shadowbox z-index = 999\" href=\"\/media\/techs\/zindex\/sm_zindex1.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"shadowbox z-index = 999\" alt=\"shadowbox z-index\" src=\"\/media\/techs\/zindex\/tn_zindex1.jpg\" width=\"250\" height=\"60\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" title=\"change shadowbox z-index from 999 to 9999\" href=\"\/media\/techs\/zindex\/sm_zindex2.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"change z-index to 9999\" alt=\"change zindex\" src=\"\/media\/techs\/zindex\/tn_zindex2.jpg\" width=\"250\" height=\"147\" \/><\/a>\u00a0 \u00a0 \u00a0<a class=\"preview\" title=\"change header z-index from 9999 to 999\" href=\"\/media\/techs\/zindex\/sm_zindex3.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"change header z-index from 9999 to 999\" alt=\"change header z-index 9999\" src=\"\/media\/techs\/zindex\/tn_zindex3.jpg\" width=\"250\" height=\"105\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" title=\"change header z-index to 999\" href=\"\/media\/techs\/zindex\/sm_zindex4.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"change header z-index to 999\" alt=\"change header z-index to 999\" src=\"\/media\/techs\/zindex\/tn_zindex4.jpg\" width=\"250\" height=\"123\" \/><\/a>\u00a0 \u00a0 \u00a0<a class=\"preview\" title=\"Shadowbox is over the header now\" href=\"\/media\/techs\/zindex\/sm_zindex5.jpg\" rel=\"shadowbox[zindex]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline;\" title=\"shadowbox is over the header now\" alt=\"shadowbox over the header\" src=\"\/media\/techs\/zindex\/tn_zindex5.jpg\" width=\"250\" height=\"161\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>Always test all the overlay modals over any fixed css or youtube.<\/em><\/p>\n<p style=\"text-align: center;\"><ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In CSS, z-index is the order of appearance of one layer over the other, the higher the z-index the higher priority of the layer above the lower z-index displays. For example, on my theme, I made header to be fixed with z-index:9999 and my shadowbox overlay z-index:999 . So, on a small display like 1024&#215;768, <a href=\"https:\/\/www.dognmonkey.com\/techs\/working-with-z-index-in-css.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288,26],"tags":[390,174,389],"class_list":["post-3463","post","type-post","status-publish","format-standard","hentry","category-css-wordpress","category-themes","tag-fixed-header","tag-shadowbox","tag-z-index"],"views":360,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/3463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=3463"}],"version-history":[{"count":3,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/3463\/revisions"}],"predecessor-version":[{"id":3466,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/3463\/revisions\/3466"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=3463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=3463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=3463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}