{"id":14142,"date":"2011-09-06T19:43:53","date_gmt":"2011-09-07T02:43:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14142"},"modified":"2022-09-20T10:07:17","modified_gmt":"2022-09-20T17:07:17","slug":"z-index","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/","title":{"rendered":"z-index"},"content":{"rendered":"<pre><code class=\"language-css\">div {\n  z-index: 1; \/* integer *\/\n}<\/code><\/pre>\n<p>The <code>z-index<\/code> property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. <code>z-index<\/code> only affects elements that have a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/\">position<\/a> value other than <code>static<\/code> (the default).<\/p>\n<p>Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/\">margin<\/a> has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16548\" title=\"basicz-index\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/basicz-index.png?resize=425%2C235\" alt=\"\" width=\"425\" height=\"235\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/basicz-index.png?w=425&amp;ssl=1 425w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/basicz-index.png?resize=300%2C166&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Without any <code>z-index<\/code> value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.<\/p>\n<p>Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can <strong>never<\/strong> be higher than element B.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16549\" title=\"context\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/context.png?resize=530%2C342\" alt=\"\" width=\"530\" height=\"342\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/context.png?w=530&amp;ssl=1 530w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/context.png?resize=300%2C194&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Note that older version of IE get this context stuff a bit screwed up. Here&#8217;s <a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/fixing-ie-z-index\/\">a jQuery fix for that<\/a>.<\/p>\n<h3 id=\"more-information\">More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/video-screencasts\/40-how-z-index-works\/\">How <code>z-index<\/code> Works<\/a>\u00a0(screencast)<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/rational-z-index-values\/\">Rational <code>z-index<\/code> Values<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Positioning\/Understanding_z_index\" rel=\"noopener\">Understanding <code>z-index<\/code><\/a>\u00a0(MDN)<\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\">Chrome<\/th>\n<th class=\"safari\">Safari<\/th>\n<th class=\"firefox\">Firefox<\/th>\n<th class=\"opera\">Opera<\/th>\n<th class=\"ie\">IE<\/th>\n<th class=\"android\">Android<\/th>\n<th class=\"iOS\">iOS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>div { z-index: 1; \/* integer *\/ } The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default). Elements can overlap for a variety [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13961,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4480,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/fixing-ie-z-index\/","url_meta":{"origin":14142,"position":0},"title":"Fixing IE z-index","date":"October 22, 2009","format":false,"excerpt":"This isn't an end-all-be-all solution to fixing all weird IE z-index issues, but it certainly can help in some circumstances. What it does is loop through each of the elements that you declare and apply ever-declining z-index values on them. IE gets this backwards, and this sets it correctly. The\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4093,"url":"https:\/\/css-tricks.com\/snippets\/html\/keep-flash-behind-other-elements\/","url_meta":{"origin":14142,"position":1},"title":"Keep Flash Behind Other Elements","date":"September 16, 2009","format":false,"excerpt":"For example, a dropdown menu going \"behind\" a flash movie, or staying on top of a lightbox layover. Try This #1 Add this to the Flash embed code: Try This #2 Make sure the element that is supposed to be on top has positioning (fixed, relative, or absolute) and a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9431,"url":"https:\/\/css-tricks.com\/snippets\/css\/ribbon\/","url_meta":{"origin":14142,"position":2},"title":"Ribbon","date":"May 15, 2011","format":false,"excerpt":"<h1 class=\"ribbon\"> <strong class=\"ribbon-content\">Everybody loves ribbons<\/strong> <\/h1> .ribbon { font-size: 16px !important; \/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play\u2026","rel":"","context":"With 67 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372680,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-end\/","url_meta":{"origin":14142,"position":3},"title":"grid-column-end","date":"August 25, 2022","format":false,"excerpt":"The grid-column-end CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item ends in a grid layout. This property \u2014 among other line-based placement grid properties \u2014 controls the size of a grid item and where it sits on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":192882,"url":"https:\/\/css-tricks.com\/snippets\/sass\/css-triangle-mixin\/","url_meta":{"origin":14142,"position":4},"title":"CSS Triangle Mixin","date":"January 11, 2015","format":false,"excerpt":"There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it. If, like me, you never quite remember how it works, be sure we can use Sass to help us. \/\/\/\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16523,"url":"https:\/\/css-tricks.com\/video-screencasts\/110-quick-overview-of-css-position-values\/","url_meta":{"origin":14142,"position":5},"title":"#110: Quick Overview of CSS Position Values","date":"March 18, 2012","format":false,"excerpt":"This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to \"nudge\" and leaves the element's original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are\u2026","rel":"","context":"With 68 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14142"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14142"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14142\/revisions"}],"predecessor-version":[{"id":373604,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14142\/revisions\/373604"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13961"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14142"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}