- Published on
What Is a Stacking Context?
- Authors
- Name
- Ryan
Table of Contents
1. What Is a Stacking Context?
A stacking context is a three-dimensional rendering structure used by the browser to determine which elements appear in front of or behind others. Elements form stacking contexts based on their z-index, positioning, and specific CSS properties. The root element (<html>) naturally creates a stacking context, and certain conditions can trigger new ones:
- An element with position: absolute or relative and a specified z-index
- Use of properties like opacity < 1, transform, filter, or will-change
- When mix-blend-mode is set
A new stacking context isolates its child elements from participating in the parent stacking order.
2. Rendering Layers vs. Compositing Layers
When rendering a page, browsers generally follow three phases:
Layout
Painting
Compositing
In the compositing phase, the browser may divide the page into multiple compositing layers, which are rendered independently via the GPU. These compositing layers are often derived from stacking contexts, but not always one-to-one.
By default, multiple stacking contexts may share a single rendering layer (also called a compositing layer)—usually the root layer. This is part of a browser performance optimization technique called layer squashing: minimizing the number of layers to avoid resource overhead.
3. When Is a New Compositing Layer Forced?
When an element is styled with GPU-accelerated properties (e.g., transform, will-change, <video>, <canvas>), the browser promotes it to a separate compositing layer to avoid redrawing the main layer frequently.
Importantly: If a lower element is promoted to a compositing layer (e.g., using will-change: transform), then any higher elements that need to visually overlay it may also be promoted, and eventually merged into a new shared compositing layer.
In short: compositing layers do not stack infinitely. The browser merges them intelligently to maintain correct visuals and prevent layer explosion.
4. Practical Recommendations
Avoid overusing will-change or transform just to promote elements; excessive layering can backfire and bundle unrelated elements into the same layer, increasing memory usage.
Use browser developer tools (e.g., Chrome's Layers panel) to inspect the layer tree for debugging and performance tuning.
5. Test Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box1 {
background-color: red;
left: 100px;
top: 100px;
/* Promote to a separate compositing layer */
/* transform: translateZ(0); */
}
.box2 {
background-color: blue;
left: 150px;
top: 150px;
}
.box3 {
background-color: yellow;
left: 200px;
top: 200px;
}
.box4 {
background-color: green;
left: 250px;
top: 250px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>
References: