{"id":16376163,"url":"https://github.com/felixfbecker/vscode-css-stacking-contexts","last_synced_at":"2026-03-11T21:07:13.582Z","repository":{"id":66011615,"uuid":"305123280","full_name":"felixfbecker/vscode-css-stacking-contexts","owner":"felixfbecker","description":"VS Code extension to highlight stacking contexts in CSS and ineffective z-index declarations 💤","archived":false,"fork":false,"pushed_at":"2023-12-15T20:32:32.000Z","size":1848,"stargazers_count":17,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-10T08:07:01.703Z","etag":null,"topics":["css","developer-tools","sass","scss","stacking-contexts","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/felixfbecker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-18T14:41:43.000Z","updated_at":"2024-05-28T19:04:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"c7851a24-1897-4142-8d52-68195b4a6f7d","html_url":"https://github.com/felixfbecker/vscode-css-stacking-contexts","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/felixfbecker/vscode-css-stacking-contexts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixfbecker%2Fvscode-css-stacking-contexts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixfbecker%2Fvscode-css-stacking-contexts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixfbecker%2Fvscode-css-stacking-contexts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixfbecker%2Fvscode-css-stacking-contexts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felixfbecker","download_url":"https://codeload.github.com/felixfbecker/vscode-css-stacking-contexts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixfbecker%2Fvscode-css-stacking-contexts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30400902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T21:02:20.017Z","status":"ssl_error","status_checked_at":"2026-03-11T20:59:32.667Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","developer-tools","sass","scss","stacking-contexts","vscode","vscode-extension"],"created_at":"2024-10-11T03:23:45.015Z","updated_at":"2026-03-11T21:07:13.566Z","avatar_url":"https://github.com/felixfbecker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💤 VS Code CSS Stacking Contexts [![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/felixfbecker.css-stacking-contexts)](https://marketplace.visualstudio.com/items?itemName=felixfbecker.css-stacking-contexts)\n\n\u003e 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.\n\u003e\n\u003e **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.\n\u003e\n\u003e \u003cfooter\u003e\n\u003e \u003ccite\u003e— \u003ca href=\"https://philipwalton.com/articles/what-no-one-told-you-about-z-index/\"\u003eWhat No One Told You About Z-Index\u003c/a\u003e, Philip Walton, Engineer @ Google\u003c/cite\u003e\n\u003e \u003c/footer\u003e\n\nThis 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_.\n\n\u003cpicture\u003e\n\u003csource srcset=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/screenshot1.png\" media=\"(prefers-color-scheme: dark)\" /\u003e\n\u003csource srcset=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/screenshot1_light.png\" media=\"(prefers-color-scheme: light)\" /\u003e\n\u003cimg alt=\"Screenshot\" src=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/screenshot1_light.png\" /\u003e\n\u003c/picture\u003e\n\nAdditionally, it will tell you when a `z-index` declaration has no effect, and offer automatic quick fixes.\n\n\u003cpicture\u003e\n\u003csource srcset=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/ineffective-z-index.gif\" media=\"(prefers-color-scheme: dark)\" /\u003e\n\u003csource srcset=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/ineffective-z-index_light.gif\" media=\"(prefers-color-scheme: light)\" /\u003e\n\u003cimg alt=\"Ineffective z-index demo\" src=\"https://raw.githubusercontent.com/felixfbecker/vscode-css-stacking-contexts/main/images/ineffective-z-index_light.gif\" /\u003e\n\u003c/picture\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixfbecker%2Fvscode-css-stacking-contexts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelixfbecker%2Fvscode-css-stacking-contexts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixfbecker%2Fvscode-css-stacking-contexts/lists"}