CSS Z-Index Playground
Fast, accurate and free online piaskownica css from index tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Z-index test settings
<div class="demo">
<header class="topbar">
<div class="brand">Demo UI</div>
<div class="menu">
<button class="btn">Menu</button>
<div class="dropdown">
<div class="dropdown-item">Profile</div>
<div class="dropdown-item">Billing</div>
<div class="dropdown-item">Sign out</div>
</div>
</div>
</header>
<main class="content">
<div class="card">
<div class="card-title">Card A</div>
<p>Try to make the dropdown appear above the topbar.</p>
<p><strong>Hint:</strong> The content container creates a stacking context.</p>
</div>
<div class="toast">
Toast notification (z-index: 30)
</div>
</main>
</div>
/* Intentional z-index puzzle:
- The header is sticky with z-index: 20
- The dropdown has z-index: 999
- But the content wrapper creates a new stacking context using transform,
so the dropdown cannot rise above the header.
*/
.demo{
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:#f6f7fb;
padding:20px;
min-height:480px;
}
.topbar{
position: sticky;
top: 0;
z-index: 20;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-radius:14px;
background:white;
box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.brand{ font-weight: 800; }
.menu{ position: relative; }
.btn{
border:1px solid rgba(0,0,0,.14);
background:white;
padding:8px 12px;
border-radius:12px;
font-weight:700;
}
.dropdown{
position:absolute;
right:0;
top: calc(100% + 8px);
width: 220px;
border-radius:14px;
background:white;
box-shadow: 0 18px 42px rgba(0,0,0,.18);
overflow:hidden;
/* Looks high... */
z-index: 999;
}
.dropdown-item{
padding:10px 12px;
border-bottom:1px solid rgba(0,0,0,.06);
}
.dropdown-item:last-child{ border-bottom:0; }
.content{
margin-top: 18px;
/* This transform creates a stacking context.
Try removing it, or move the dropdown outside. */
transform: translateZ(0);
}
.card{
background:white;
border-radius:16px;
padding:16px;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
max-width: 520px;
}
.card-title{ font-weight: 800; margin-bottom: 6px; }
.toast{
position: fixed;
right: 24px;
bottom: 24px;
z-index: 30;
background: rgba(13,110,253,.92);
color: white;
padding: 10px 12px;
border-radius: 999px;
font-weight: 800;
}
Rate this tool:
Related tools
Other tools you may find usefulz-index CSS Sandbox - Understand HTML layering and stacking context
The z-index interactive CSS sandbox is a visual online tool designed to easily understand element layering and how stacking context works.
How does the z-index property in CSS work and why is it so confusing?
The z-index property in CSS determines the order in which elements are displayed along the Z axis, i.e. it determines which objects on the web page are closer to the user (on top) and which are below. Although this concept seems simple, in practice it causes many problems for programmers and website designers. It often happens that assigning a huge value, such as z-index: 9999, does not move the element to the top.
This is because the z-index does not operate in a vacuum. This property only applies to positioned elements (those that have their position property set to relative, absolute, fixed, or sticky). Default static elements completely ignore z-index. The second, much more serious, source of confusion is the concept of stacking context.
Understanding Stacking Context - The Key to Mastering the z-index
A stacking context is a three-dimensional structure within an HTML document within which elements are arranged along the Z-axis. When an element creates a new stacking context, all of its child elements are positioned relative to it, rather than relative to the entire page. This means that a child with a very high z-index will not rise above a lower priority parent in the parent context.
You can compare it to document folders - no matter how high you place a piece of paper inside one folder, the entire folder can still be under another folder. Understanding this hierarchy is key to avoiding frustration when styling navigation menus, modal windows, and tooltips pop-up notifications.
How to use z-index CSS sandbox to test layers in real time?
Our z-index CSS sandbox is designed to make it easier to visualize these complex dependencies. In the side panel, you can add virtual HTML elements, change their positioning, and manipulate z-index values using simple controls. The main screen presents a three-dimensional layer model that can be rotated to various angles.
Thanks to this, you will see exactly how changing the properties of one element affects its position in the layered structure. The tool allows you to simulate the creation of new stacking contexts, which helps you quickly understand why a given element is hidden behind another, despite a theoretically higher z-index.
CSS properties that affect z-index or create a new stacking context
Many developers don't realize that a new layout context can be created by CSS properties other than just positioning and z-index. One of the most common culprits of unexpected layer behavior is the use of an opacity property with a value less than 1. Changing the transparency of an element automatically isolates its children in a new context.
A similar effect is caused by the use of filters, geometric transformation effects, perspective properties, as well as modern properties such as clip-path or mask. Also, containers with Flexbox or CSS Grid layout enabled, when combined with specific child parameters, generate a new layout environment. Our sandbox allows you to experiment with all these properties.
The most common z-index problems and best practices for solving them
A classic problem is when the dropdown pop-up menu hides under an image slider or advertising banner. The most common solution is to locate the common ancestor of both elements and make sure that the dropdown container has a higher z-index and a properly defined positioning context than the banner container.
Another problem is the so-called "z-index war", i.e. mindlessly adding higher and higher values (e.g. 99999, 999999) in order to fix the layout. This leads to a complete loss of control over the code. It is good practice to use low, ordered values (e.g. 10, 20, 30) and document the tiered structure of the project in code comments.
FAQ
Why isn't the z-index property working on my HTML element?
The most common cause is that the position property is not set. Z-index only works for positioned elements (relative, absolute, fixed, sticky). For elements with default position: static it is ignored.
What is Stacking Context in CSS?
This is an independent area for rendering elements on the Z axis. Child elements within one context cannot go above elements from another, higher context, regardless of how high the z-index we assign them.
Do high z-index values always mean the element will be on top?
No, a high z-index value only works within the same stacking context. If a parent element has a low priority in its context, its children will also be below elements from other, higher contexts.
What CSS properties (besides z-index) create a new layout context?
The new stacking context is created by, among others: properties: opacity (less than 1), transform (e.g. translate), filter, perspective, clip-path, mask and some flexbox and css grid configurations.
How does the z-index sandbox help with CSS debugging?
The tool allows you to visually present layers in three-dimensional space. You can recreate the HTML structure of your page and see which CSS properties create new layout contexts.