{"id":3878,"date":"2022-01-02T13:00:51","date_gmt":"2022-01-02T13:00:51","guid":{"rendered":"https:\/\/elementor.com\/resources\/?p=3878"},"modified":"2022-01-02T13:00:53","modified_gmt":"2022-01-02T13:00:53","slug":"what-is-z-index-and-how-is-it-used","status":"publish","type":"post","link":"https:\/\/elementor.com\/resources\/glossary\/what-is-z-index-and-how-is-it-used\/","title":{"rendered":"What Is Z-index and How Is It Used?"},"content":{"rendered":"\n<p>A <strong>z-index <\/strong>is a CSS property that controls overlapping HTML elements&#8217; vertical stacking order, which appears closer to the viewer.&nbsp;<\/p>\n\n\n\n<p>Elements with a higher index are placed on top of those with a lower one. <a href=\"https:\/\/elementor.com\/help\/how-to-use-z-index-in-elementor\/\">Z-index<\/a> works on most positioned elements, like absolute, relative, and fixed, but not static. The&nbsp;position&nbsp;property helps manipulate an element\u2019s location.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Position Property and Z-index&nbsp;<\/h2>\n\n\n\n<p>Several position properties determine which element positioning method a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/web-designer-vs-web-developer\/\"   title=\"web designer\" data-wpil-keyword-link=\"linked\">web designer<\/a> will use. Elements are positioned using the top, bottom, right, and left properties. However, the properties will not work unless the position property is set. Properties also work differently depending on the position value.&nbsp;<\/p>\n\n\n\n<p>There are six position values: absolute, static, relative, fixed, inherit, and sticky. As mentioned, the z-index works with absolute, relative, fixed, sticky, and inherit positions.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Absolute:<\/strong> The element is extracted from the document&#8217;s flow, and other elements behave as if it isn\u2019t there and all the other positional properties will affect it.<\/li><li><strong>Relative:<\/strong> An element&#8217;s original position stays in the document flow; however, the left\/right\/top\/bottom\/z-index will now work. The positional properties &#8220;nudge&#8221; the element from the original position in that direction.<\/li><li><strong>Fixed:<\/strong> The element is placed relative to a user&#8217;s viewport or actual browser window and is not affected by scrolling.<\/li><li><strong>Sticky: <\/strong>The<strong> <\/strong>element value is treated as relative until the viewport\u2019s scroll location reaches a specified threshold. At this point, the element takes a fixed&nbsp;position where it is told to stick.<\/li><li><strong>Inherit: <\/strong>The&nbsp;position&nbsp;value doesn\u2019t cascade, so it can be used to force it to do so and&nbsp;inherit&nbsp;the positioning value from its parent.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use the Z-index?<\/h2>\n\n\n\n<p>Elements can overlap for several reasons, such as when relative positioning nudges it, covering something else; a negative&nbsp;margin&nbsp;has pulled the element over another, or absolutely positioned elements overlap.&nbsp;<\/p>\n\n\n\n<p>Without a\u00a0z-index value, elements stack in the order that they occur in the DOM (the lowest one down at the same hierarchy level that appears on top). Elements with non-static positioning always appear on top of default static positioning. Also, nesting plays a significant role. For example, if element B sits above element A, a child element of element A can <strong>never<\/strong>\u00a0be higher than element B.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A z-index is a CSS property that controls overlapping HTML elements&#8217; vertical stacking order, which appears closer to the viewer<\/p>\n","protected":false},"author":1292159,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_angie_page":false,"page_builder":"","footnotes":""},"categories":[15,30],"tags":[16],"class_list":["post-3878","post","type-post","status-publish","format-standard","hentry","category-glossary","category-elementor","tag-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/3878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/users\/1292159"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/comments?post=3878"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/3878\/revisions"}],"predecessor-version":[{"id":3879,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/3878\/revisions\/3879"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=3878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=3878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=3878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}