# z-index

Published articles for z-index.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Never lose a z-index battle again

DevFeed: [Never lose a z-index battle again](<https://devfeed.tech/articles/never-lose-a-z-index-battle-again-52342.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2025/never-lose-a-z-index-battle-again>)

Author: Manuel Matuzović

Published: 2025-04-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [background](<https://devfeed.tech/tags/background.md>), [calc](<https://devfeed.tech/tags/calc.md>), [css](<https://devfeed.tech/tags/css.md>), [position](<https://devfeed.tech/tags/position.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

This tutorial explains how CSS's infinity keyword in calc() can be used as a very large z-index value. It also describes the signed 32-bit limits of z-index and how ties are resolved by document order.

### Source excerpt

Recently, I learned about numeric keywords. Since I was terrible in school, I didn't know what to do with them, but when I saw infinity, I immediately thought of a great use case. According to the spec, the infinity keyword in the calc() function can be used to indicate the largest possible value of something since an infinite value gets clamped to the allowed range. For example, you can set an element's largest possible inline size. CSS button { inline-size: calc(infinity * 1px); } Really large button Of course, that's not the great use case I'm talking about. Infinity can be super helpful when you want to ensure an element is at the top of the z-axis. HTML <button class="a">A</button> <button class="b">B</button> CSS button { position: absolute; } button.a { z-index: calc(infinity); background: green; } button.b { z-index: 2147483646; background: blue; } A B You can see how the first button with calc(infinity) set as the z-index is above the button with z-index: 2147483646;. 2147483646 is not an arbitrary number; it's the second-largest possible z-index. A z-index can be any signed 32-bit integer value, ranging from −2,147,483,648 through 2,147,483,647. If you change the value of the second button to 2147483647, it's on top of the first button because 2147483647 and infinity are the same in this case and the second button comes later in the document. button { position: absolute; } button.a { z-index: calc(infinity); background: green; } button.b { z-index: 2147483647; background: blue; } A B Changing the z-index to calc(infinity + 1) or 2147483648 doesn't make a difference because we've already reached the limit with 2147483647 or calc(infinity). button { position: absolute; } button.a { z-index: calc(infinity + 1); background: green; } button.b { z-index: 2147483647; background: blue; } A B Credit for the title of this blog post goes to Will Boyd My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

## How to Audit and Organize CSS z-index Values and Stacking Contexts

DevFeed: [How to Audit and Organize CSS z-index Values and Stacking Contexts](<https://devfeed.tech/articles/spring-cleaning-for-z-indexes-20100.md>)

Original publisher: [Read original article](<https://medium.com/jobteaser-dev-team/spring-cleaning-for-z-indexes-42beba8e526a?source=rss----bd77d16a0035---4>)

Author: Jean-Jacques Royneau

Published: 2024-11-05T10:06:48Z

Content type: tutorial

Language: en

Sources: [JobTeaser](<https://devfeed.tech/sources/jobteaser.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [audit](<https://devfeed.tech/tags/audit.md>), [bugs](<https://devfeed.tech/tags/bugs.md>), [cleanup](<https://devfeed.tech/tags/cleanup.md>), [css](<https://devfeed.tech/tags/css.md>), [display](<https://devfeed.tech/tags/display.md>), [properties](<https://devfeed.tech/tags/properties.md>), [stacking-context](<https://devfeed.tech/tags/stacking-context.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

This article describes auditing z-index declarations, centralizing values with CSS custom properties, and reducing unnecessary z-indexes by accounting for stacking contexts and natural DOM order.

### Source excerpt

Managing z-index is a classic challenge for front-end developers. As a project grows, display conflicts and bugs related to z-index can quickly turn into serious headaches. I recently took some time to clean up the z-indexes in one of our projects. In this article, I'll share the approach I used for this cleanup (while also laying the foundation for keeping things manageable in the long run). 1. Analyzing the existing z-indexes The first step was to perform a thorough audit of all the z-index declarations in the project. This gave me an overview of how many z-indexes we had and what values were being used. Here's what I found: - August 2023: 57 declarations with 8 distinct values. - February 2024: 87 declarations with 19 distinct values. This evolution showed me that the use of z-indexes had increased significantly. And there was no reason to believe it would stop. With that in mind, my goal became to centralize and standardize these values. 2. Centralizing z-indexes with CSS Custom Properties I centralized all the z-index values in a single file using CSS custom properties. This allowed me to have an overview of the different layers of elements on the page, helping me get a (slightly) clearer picture of the task ahead. If you'd like to get an idea (or maybe scare yourself a bit), here's what that first file looked like: :root { - z-index-second-basement: -2; - z-index-basement: -1; - z-index-ground: 0; - z-index-floor: 1; - z-index-second-floor: 2; - z-index-third-floor: 3; - z-index-job-ads-secondary-filters--selects: 10; - z-index-job-ads-results-sort: 10; - z-index-job-ads-primary-filters: 20; - z-index-fo-header: 30; - z-index-above-fo-header: 31; - z-index-fo-header--dropdowns: 100; - z-index-career-center--login-modal--autocomplete-list: 99; - z-index-bo-drawer-backdrop: 999; - z-index-bo-drawer: 1000; - z-index-feature-env-switcher: 9999; - z-index-notifications-panel: 10000; - z-index-msw-tools-panel--open-button: 99999; - z-index-msw-tools-panel: 999999; }

## Understanding CSS Stacking Contexts and z-index

DevFeed: [Understanding CSS Stacking Contexts and z-index](<https://devfeed.tech/articles/what-the-heck-z-index-45206.md>)

Original publisher: [Read original article](<https://www.joshwcomeau.com/css/stacking-contexts/>)

Author: Josh W. Comeau

Published: 2021-02-22T14:00:00Z

Content type: tutorial

Language: en

Sources: [Josh Comeau's blog](<https://devfeed.tech/sources/josh-comeau-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [css](<https://devfeed.tech/tags/css.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [stacking-context](<https://devfeed.tech/tags/stacking-context.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

This tutorial explains why z-index values do not always determine which HTML element appears on top. It introduces CSS stacking contexts, shows how elements and their children are grouped, and explains how z-index is compared within each context.

### Source excerpt

The z-index property can be a tricky little bugger. Sometimes, no matter how much you crank up the number, the element never rises to the top! In this article, we explore stacking contexts, and see how they can thwart our efforts to use z-index. We'll also learn how to use this mechanism to our advantage.

## Understanding Z-Index in CSS

DevFeed: [Understanding Z-Index in CSS](<https://devfeed.tech/articles/understanding-z-index-in-css-45402.md>)

Original publisher: [Read original article](<https://ishadeed.com/article/understanding-z-index/>)

Author: Ahmad Shadeed

Published: 2021-02-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [Ahmad Shadeed](<https://devfeed.tech/sources/ahmad-shadeed.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [context](<https://devfeed.tech/tags/context.md>), [css](<https://devfeed.tech/tags/css.md>), [guide](<https://devfeed.tech/tags/guide.md>), [interactive](<https://devfeed.tech/tags/interactive.md>), [stacking](<https://devfeed.tech/tags/stacking.md>), [stacking-context](<https://devfeed.tech/tags/stacking-context.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

A visual and interactive guide to CSS z-index and stacking contexts. It explains how source order, positioning, z-index values, negative values, and nested stacking contexts determine the front-to-back order of overlapping elements.

### Source excerpt

A visual and interactive guide to learn about CSS z-index.

## How CSS z-index and stacking order work

DevFeed: [How CSS z-index and stacking order work](<https://devfeed.tech/articles/what-no-one-told-you-about-z-index-29533.md>)

Original publisher: [Read original article](<https://philipwalton.com/articles/what-no-one-told-you-about-z-index/>)

Published: 2013-01-15T19:17:39Z

Content type: tutorial

Language: en

Sources: [Philip Walton](<https://devfeed.tech/sources/philip-walton.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

A tutorial explaining CSS stacking order and why z-index alone does not determine which elements appear in front. It demonstrates how changing a parent element's opacity can affect stacking without changing the HTML, z-index, or position properties.

### Source excerpt

The problem with z-index is that very few people understand how it really works. It's not complicated, but it if you've never taken the time to read its specification, there are almost certainly crucial aspects that you're completely unaware of.

## Invert a whole webpage with CSS only

DevFeed: [Invert a whole webpage with CSS only](<https://devfeed.tech/articles/invert-a-whole-webpage-with-css-only-51997.md>)

Original publisher: [Read original article](<https://lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/>)

Author: Lea Verou

Published: 2011-04-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [april-fools](<https://devfeed.tech/tags/april-fools.md>), [blog](<https://devfeed.tech/tags/blog.md>), [color](<https://devfeed.tech/tags/color.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [images](<https://devfeed.tech/tags/images.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jquery](<https://devfeed.tech/tags/jquery.md>), [mozilla](<https://devfeed.tech/tags/mozilla.md>), [opera](<https://devfeed.tech/tags/opera.md>), [original](<https://devfeed.tech/tags/original.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [pointer-events](<https://devfeed.tech/tags/pointer-events.md>), [scrollbars](<https://devfeed.tech/tags/scrollbars.md>), [scrolling](<https://devfeed.tech/tags/scrolling.md>), [svg](<https://devfeed.tech/tags/svg.md>), [tips](<https://devfeed.tech/tags/tips.md>), [z-index](<https://devfeed.tech/tags/z-index.md>)

### AI overview

A fixed, one-pixel `body:before` element with a very large `outline:2999px solid invert` can invert a webpage's colors using CSS 2.1; the outline does not need `pointer-events:none` and does not affect scrolling. The text provides a bookmarklet to inject the style, but says the `invert` outline color works only in Opera and IE9+. It suggests SVG filters might extend support to Firefox, while noting Mozilla planned not to support `invert` because of a CSS 2.1 specification loophole.

### Source excerpt

I recently saw Paul Irish's jQuery invert page plugin. It inverts every color on a webpage including images or CSS. This reminded me of the invert color keyword that's allowed on outlines (and sadly only supported by Opera and IE9+). So I wondered how it could be exploited to achieve the same effect through CSS alone. Turned out to be quite simple actually: body:before { content:""; position:fixed; top:50%; left: 50%; z-index:9999; width:1px; height: 1px; outline:2999px solid invert; } Not even pointer-events:none; is needed, since outlines don't receive pointer events anyway, and there's no issue with scrollbars since they don't contribute to scrolling. So this is not even CSS3, it's just plain ol' CSS 2.1. And here's a bookmarklet to inject it into any given page: [Invert page](javascript:(function(){var%20style=document.createElement('style');style.innerHTML='body:before%20{%20content:%22%22;%20position:fixed;%20top:50%25;%20left:50%25;%20z-index:9999;%20width:1px;%20height:%201px;%20outline:2999px%20solid%20invert;%20}';document.body.appendChild(style)})();) **Note:**This will only work on Opera and IE9+ since they're currently the only ones supporting the color keyword 'invert' on outlines. However, it's probably possible to add Firefox support too with SVG filters, since they support them on HTML elements as well. As for why would someone want to invert a page... I guess it could be useful for people that can read white text on dark backgrounds more easily, April fools jokes, konami code fun and stuff like that. Update: Mozilla is planning to never support invert because there's a loophole in the CSS 2.1 spec that allows them to do that. However, you can push them to support it by voting on the relevant issue.