# sourcegraph-css-stacking-contexts

**Repository Path**: mirrors_felixfbecker/sourcegraph-css-stacking-contexts

## Basic Information

- **Project Name**: sourcegraph-css-stacking-contexts
- **Description**: Sourcegraph extension to highlight CSS declarations that introduce new stacking contexts.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-28
- **Last Updated**: 2026-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 💤 CSS Stacking Contexts Sourcegraph Extension

> 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.
>
> **The key to avoid getting tripped up is being able to spot when new stacking contexts are formed**. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.
>
> <footer>
> <cite>— <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a>, Philip Walton, Engineer @ Google</cite>
> </footer>

This extension makes [Stacking Contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) **visible** in CSS and SCSS, allowing you to write `z-index` declarations using small values _with confidence_.

<picture>
<source srcset="https://raw.githubusercontent.com/felixfbecker/sourcegraph-css-stacking-contexts/main/images/screenshot1.png" media="(prefers-color-scheme: dark)" />
<source srcset="https://raw.githubusercontent.com/felixfbecker/sourcegraph-css-stacking-contexts/main/images/screenshot1_light.png" media="(prefers-color-scheme: light)" />
<img alt="Screenshot" src="https://raw.githubusercontent.com/felixfbecker/sourcegraph-css-stacking-contexts/main/images/screenshot1_light.png" />
</picture>

Additionally, it will tell you when a `z-index` declaration has no effect.