# stacking-context

Published articles for stacking-context.

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

## 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>), [modern web development](<https://devfeed.tech/topics/modern-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; }