z-index Stacking Context Boundary Check
Audit supplied containing stacking-context ancestry; descendant local z-index cannot escape ancestor contexts, and unrelated roots are not ordered. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
A stacking context groups local paint-order comparisons within a larger hierarchy.
A stacking context groups local paint-order comparisons within a larger hierarchy.1
Equal local z-index values from different contexts do not by themselves determine global stacking order. Use z-index Stacking Context Boundary Check to evaluate the supplied inputs under the specific model below.
When to use z-index Stacking Context Boundary Check
Use z-index Stacking Context Boundary Check to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use z-index Stacking Context Boundary Check and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter First stacking context path, Second stacking context path, First local z index, Second local z index using the field table and validation rules below, then run the tool.
- Read Local z indices directly comparable, Common context depth and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| firstStackingContextPath | First stacking context path | array of string | Required; constraints below |
| secondStackingContextPath | Second stacking context path | array of string | Required; constraints below |
| firstLocalZIndex | First local z index | number | Required; constraints below |
| secondLocalZIndex | Second local z index | number | Required; constraints below |
Enter two root-to-containing-stacking-context ID paths and finite local z-index values. The tool counts their shared leading IDs and reports direct comparability only when both entire context paths are identical. The supplied z-index numbers are validated but do not affect either output. A different-context result does not determine which element paints on top; the tool does not inspect a DOM or compare ancestor stacking levels.
sharedDepth = length(commonPrefix(pathA,pathB)); directlyComparable = identicalPaths Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| localZIndicesDirectlyComparable | Local z indices directly comparable | boolean |
| commonContextDepth | Common context depth | number |
{
"input": {
"firstStackingContextPath": [
"root",
"a"
],
"secondStackingContextPath": [
"root",
"b"
],
"firstLocalZIndex": 999,
"secondLocalZIndex": 1
},
"output": {
"localZIndicesDirectlyComparable": false,
"commonContextDepth": 1
}
}Limitations and assumptions
Equal local z-index values from different contexts do not by themselves determine global stacking order. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use isolation Stacking Context Fix Note for a related task: Isolation can create a stacking context and restrict blending with the outside backdrop.
Use @layer revert-layer Cascade Order Lookup for a related task: Cascade layers have ordering rules that differ for normal and important declarations.
References
-
z-index Stacking Context Boundary Check — tool.io
Similar or alternative tools
- isolation Stacking Context Fix Note
Isolation can create a stacking context and restrict blending with the outside backdrop.
- @layer revert-layer Cascade Order Lookup
Cascade layers have ordering rules that differ for normal and important declarations.