{"id":209060,"date":"2015-10-01T10:43:04","date_gmt":"2015-10-01T17:43:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=209060"},"modified":"2015-10-01T10:43:04","modified_gmt":"2015-10-01T17:43:04","slug":"css-stacking-contexts","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-stacking-contexts\/","title":{"rendered":"CSS Stacking Contexts"},"content":{"rendered":"

Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context<\/a>, then:<\/p>\n

Children of a stacking context are painted from bottom to top in the following order.<\/p>\n

    \n
  1. Elements with a negative stack level, typically elements with z-index: -1<\/code><\/li>\n
  2. Elements with a position<\/code> value of static<\/code>.<\/li>\n
  3. Elements with a stack level of 0, typically positioned elements with a z-index<\/code> value of auto<\/code>.<\/li>\n
  4. Elements with positive stack levels, e.g. a positioned element with a z-index<\/code> value of 1<\/code> or higher.<\/li>\n<\/ol>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then: Children of a stacking context are painted from bottom to top in the following order. Elements with a negative stack level, typically elements with z-index: -1 Elements with a position value of […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":352287,"url":"https:\/\/css-tricks.com\/systems-for-z-index\/","url_meta":{"origin":209060,"position":0},"title":"Systems for z-index","date":"September 24, 2021","format":false,"excerpt":"Say you have a z-index bug. Something is being covered up by something else. In my experience, a typical solution is to put position: relative on the thing so z-index works in the first place, and maybe rejigger the z-index value until the right thing is on top. The danger\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276822,"url":"https:\/\/css-tricks.com\/putting-things-on-top-of-other-things\/","url_meta":{"origin":209060,"position":1},"title":"Putting things on top of other things","date":"September 25, 2018","format":false,"excerpt":"A plain-language romp through the trials and tribulations of z-indexby Isabel Brison. On the surface, z-index seems simple. It's a number and it represents what is on top of what... assuming it is positioned... and assuming it is within the same stacking context as the other things. ... that is\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317348,"url":"https:\/\/css-tricks.com\/css-painting-order\/","url_meta":{"origin":209060,"position":2},"title":"CSS Painting Order","date":"July 17, 2020","format":false,"excerpt":"Usually, when I see terms like \"painting order\" or \"stacking context\" my brain will start to shut off and my eyes will gloss over. Not that my brain doesn't normally shut off more often than not, but that's another topic for another time. Martin Robinson over at Igalia touches on\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336741,"url":"https:\/\/css-tricks.com\/its-always-the-stacking-context\/","url_meta":{"origin":209060,"position":3},"title":"It’s always the stacking context.","date":"March 22, 2021","format":false,"excerpt":"In \"What the heck, z-index??,\" Josh Comeau makes the analogy of layer groups in design software like Photoshop or Figma to stacking contexts in CSS. If you've got an element in a layer group A in Photoshop that is below layer group B, there is nothing you can do to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359260,"url":"https:\/\/css-tricks.com\/topological-sort\/","url_meta":{"origin":209060,"position":4},"title":"Topological sort","date":"December 16, 2021","format":false,"excerpt":"Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you don't express what the z-index should be directly; instead, you say exactly what other element you want to be on top of. I\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301081,"url":"https:\/\/css-tricks.com\/how-to-stack-elements-in-css\/","url_meta":{"origin":209060,"position":5},"title":"How to Stack Elements in CSS","date":"January 6, 2020","format":false,"excerpt":"If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let's go over two different ways to accomplish\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/cube-pattern-svg.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209060"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=209060"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209060\/revisions"}],"predecessor-version":[{"id":209062,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/209060\/revisions\/209062"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=209060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=209060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=209060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}