{"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":"
div {\n  z-index: 1; \/* integer *\/\n}<\/code><\/pre>\n
The 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. z-index<\/code> only affects elements that have a position<\/a> value other than static<\/code> (the default).<\/p>\n
Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin<\/a> has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.<\/p>\n
\"\"<\/figure>\n
Without any 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
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 never<\/strong> be higher than element B.<\/p>\n
\"\"<\/figure>\n
Note that older version of IE get this context stuff a bit screwed up. Here’s a jQuery fix for that<\/a>.<\/p>\n
More Information<\/h3>\n