CSS
What Is the Default Stacking Order of Elements Without z-index in CSS?
When designing web layouts, understanding how elements naturally stack without using the z-index property is crucial. Even if you don’t explicitly set a z-index, the browser still determines which elements appear in front using the default stacking order.
In this post, you’ll learn:
- What stacking order is
- How browsers layer elements without
z-index - The rules of default stacking behavior
- How to avoid common layout issues
🎯 What Is Stacking Order?
The stacking order determines the front-to-back positioning of HTML elements on a web page—like layers in Photoshop. The higher the order, the closer the element appears to the viewer.
🔢 Default Stacking Order Without z-index
Even without z-index, elements stack based on several CSS rules. Here’s the default stacking order, from back to front:
- Root element (
<html>) - Non-positioned elements (static) in DOM order
- Positioned elements (
relative,absolute,fixed,sticky) with noz-index - Elements with negative
z-index - Elements with positive
z-index, from lowest to highest
✅ Note: “DOM order” means that later elements in the HTML appear on top of earlier ones, when they share the same stacking context.
📦 Example Without z-index
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
.box1,
.box2 {
position: relative; /* but no z-index */
}
.box1 {
background: red;
}
.box2 {
background: blue;
margin-top: -50px; /* overlaps with Box 1 */
}
🧠 Result:
Even though both are positioned, Box 2 appears on top because it comes after Box 1 in the DOM and has no z-index.
🧪 What If Only One Has position?
If one element is positioned and the other is not:
- The positioned element will appear on top of the non-positioned one, even if it appears earlier in the HTML.
⚠️ Common Pitfalls
| Problem | Cause | Solution |
|---|---|---|
| Element not appearing above another | Missing position or z-index | Set position and assign a z-index |
| Element hidden behind others unexpectedly | DOM order or stacking context rules | Inspect with DevTools and adjust stacking |
Negative z-index element not visible | Positioned below the body background | Use with caution and check background layers |
🛠️ Best Practices
- Understand DOM order affects stacking
- Use
positionandz-indextogether when controlling layer order - Avoid using
z-indexunless necessary—often the default order is enough - Use browser DevTools to inspect stacking context and z-index conflicts
📝 Conclusion
Even without z-index, CSS follows a default stacking order based on position, DOM structure, and rendering rules. By understanding this natural behavior, you can control layout appearance more predictably—and only reach for z-index when it’s truly needed.
🔑 Recap
| Layer Type | Appears In Front Of |
|---|---|
| Positioned elements | Non-positioned elements |
| Later DOM siblings | Earlier DOM siblings |
Elements with z-index: 1 | Elements with z-index: 0 or none |
Elements with z-index: -1 | All default stacking layers |