{"id":359260,"date":"2021-12-16T14:04:07","date_gmt":"2021-12-16T22:04:07","guid":{"rendered":"https:\/\/css-tricks.com\/?p=359260"},"modified":"2021-12-16T14:04:09","modified_gmt":"2021-12-16T22:04:09","slug":"topological-sort","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/topological-sort\/","title":{"rendered":"Topological sort"},"content":{"rendered":"\n

Jordan Scales explores<\/a> the computer science concept of topological sorting<\/a>, and what it might look like if applied to the concept of z-index<\/code> in CSS. So, you don’t express what the z-index<\/code> should be directly; instead, you say exactly what other element you want to be on top of. <\/p>\n\n\n\n\n\n\n\n

I think it’s more of a proof-of-concept, but it’s fun to look at anyway:<\/p>\n\n\n\n

const resolver = new ZIndexResolver();\n\n\/\/ A nav with dropdowns\nresolver.above(\".nav\", \"main\");\nresolver.above(\".dropdown\", \".nav\");\nresolver.above(\".submenu\", \".dropdown\");\n\n\/\/ Tooltips in the document\nresolver.above(\".tooltip\", \"main\");\n\n\/\/ Modals should go above everything\nresolver.above(\".modal\", \".nav\");\nresolver.above(\".modal\", \".submenu\");\nresolver.above(\".modal\", \".tooltip\");\n\nconsole.log(resolver.resolve());<\/code><\/pre>\n\n\n\n
That produces an array in the right order:<\/p>\n\n\n\n
[ '.modal', '.tooltip', '.submenu', '.dropdown', '.nav', 'main' ]<\/code><\/pre>\n\n\n\n
…which you can skoosh into CSS:<\/p>\n\n\n\n
main { z-index: 0; }\n.nav { z-index: 1; }\n.dropdown { z-index: 2; }\n.submenu { z-index: 3; }\n.tooltip { z-index: 4; }\n.modal { z-index: 5; }<\/code><\/pre>\n\n\n\n
The problem I see here is that it doesn’t account for stacking contexts. And if there is a bug with z-index<\/code>, it’s always the stacking context<\/a>. There is no possible z-index<\/code> value that will raise up an item in a lower stacking order above any other items that are in a higher stacking context. So, to make something like this work effectively, I think it would have to know what (possibly nested) stacking context each item is in, then either attempt to jostle the stacking context themselves, or warn you that what you are asking for won’t work. <\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":276871,"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":"Jordan Scales: Topological sort","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":true,"jetpack_social_options":[]},"categories":[17],"tags":[1489],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":312701,"url":"https:\/\/css-tricks.com\/learn-z-index-using-a-visualization-tool\/","url_meta":{"origin":359260,"position":0},"title":"Learn Z-Index Using a Visualization Tool","date":"June 12, 2020","format":false,"excerpt":"There are some neat interactive demos in here from Thiru Manikandan. There are a couple of very tricky things with z-index that never fail to confuse. In addition to things like requiring positioning and source order, the trickiest are the stacking contexts and parent\/child relationships. z-index isn't a flat playing\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375537,"url":"https:\/\/css-tricks.com\/css-infinite-slider-flipping-through-polaroid-images\/","url_meta":{"origin":359260,"position":1},"title":"CSS Infinite Slider Flipping Through Polaroid Images","date":"December 9, 2022","format":false,"excerpt":"In the last article, we made a pretty cool little slider (or \"carousel\" if that\u2019s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid images. CodePen Embed Fallback Cool right? Don\u2019t look at the code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/polaroid-picture-stack.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352287,"url":"https:\/\/css-tricks.com\/systems-for-z-index\/","url_meta":{"origin":359260,"position":2},"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":168266,"url":"https:\/\/css-tricks.com\/handling-z-index\/","url_meta":{"origin":359260,"position":3},"title":"Handling z-index","date":"April 21, 2014","format":false,"excerpt":"Managing z-index across large sites can be a pain in the butt. CSS is hard to test, so it's notoriously easy to make a change that ends up, for instance, hiding some important UI under who-knows-where. If you use a CSS preprocessor, maybe we can handle it in a special\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317348,"url":"https:\/\/css-tricks.com\/css-painting-order\/","url_meta":{"origin":359260,"position":4},"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":158432,"url":"https:\/\/css-tricks.com\/may-know-z-index\/","url_meta":{"origin":359260,"position":5},"title":"What You May Not Know About Z-Index","date":"December 16, 2013","format":false,"excerpt":"It controls which element is \"on top\" visually when they happen to overlap, right? Right. But there is more to the stacking order, much of which you can't control. You can control stacking contexts though, which kind of reset the playing field within them, but themselves can be stacked. Steven\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359260"}],"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=359260"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359260\/revisions"}],"predecessor-version":[{"id":376782,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359260\/revisions\/376782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/276871"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=359260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=359260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=359260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}