Jaspreet Kaur's Blog
Z-Index: When, Where, and How

Z-Index: When, Where, and How

Learn how to manage overlapping elements on your website with Z-Index tips.

Jaspreet Kaur's photo
Jaspreet Kaur
·

4 min read

Ever had elements overlap awkwardly on your website? Ever wondered how to control which element shows on top? The answer lies in the z-index property—a simple CSS tool. In this article, we’ll uncover when, where, and how to use z-index, with some fascinating tips and tricks!

When Do You Use Z-Index?

You need z-index whenever elements overlap and you want to control which one appears on top.

  1. Pop-Ups and Modals: Ensure they float above the main content.

  2. Sticky Navigation Bars: Keep them visible over scrolling content.

  3. Dropdowns and Menus: Prevent them from hiding behind other elements.

  4. Tooltips: Make sure they display clearly above everything else.

Where Does Z-Index Work?

For z-index to work, the element needs a position other than static (the default). Valid options are:

  • relative

  • absolute

  • fixed

  • sticky

If the element is position: static, z-index won’t affect it!

But why?

  • By default, all elements are position: static, meaning they are positioned according to the normal document flow.

  • In this case, z-index is ignored because static elements don't participate in creating a stacking context. Their stacking order is simply determined by the order they appear in the DOM.

  • When position is Set (relative, absolute, fixed, sticky):

    • Setting a position value other than static establishes a stacking context or allows the element to participate in an existing stacking context.

    • The z-index property then takes effect and controls how elements overlap within the same stacking context.

How Does Z-Index Work?

Z-index operates in layers, much like a stack of transparent sheets. Each layer is assigned a number, and elements with higher numbers sit on top of those with lower numbers.

What’s a Stacking Context?

Here’s where it gets interesting: z-index only works within the same stacking context. Elements in one stacking context don’t interact directly with elements in another, even if their z-index values suggest they should.

  • A stacking context is like a mini-layering system inside the webpage.

  • Certain CSS properties on a parent element will create a new stacking context for all its children. Here are the most common ones:

    1. opacity less than 1

      • If a parent has opacity: 0.9, it creates a stacking context.

      • All child elements are now layered relative to each other, but they can’t "break out" of their parent's stacking context.

    2. Transformations (transform)

      • If you apply transform: scale(1.2) or rotate(), the parent element creates a new stacking context.

    3. CSS Filters (filter) or Perspective (perspective)

      • Using effects like filter: blur(5px) or perspective: 100px also creates a stacking context.

    4. position: fixed

      • A fixed-position element creates its own stacking context.

Fun Facts About Z-Index

Fun Fact #1: The 'Z' in Z-Index Stands for Z-Axis

In a 3D world, the X-axis is horizontal, the Y-axis is vertical, and the Z-axis represents depth. The z-index property controls depth—how far "into" or "out of" the screen an element appears.

Fun Fact #2: Negative Z-Index Values

You can use negative z-index values to push elements behind others, like backgrounds or decorative layers. For example:

.background {
    position: absolute;
    z-index: -1;
}

Fun Fact #3: No Z-Index? No Problem!

If two elements have no z-index specified, the one that appears later in the HTML will naturally appear on top.

Fun Fact #4: Higher Doesn’t Always Mean On Top!

Even if an element has a higher z-index, it might still appear "below" another element. Why? Because z-index only works within the same stacking context.

Fun Fact #5: Stacking Context Battles

Sometimes, a lower z-index value appears on top, thanks to stacking contexts. For example, a parent element with opacity: 0.9 creates a new stacking context, isolating its children.

Fun Fact #6: Infinite Z-Index Isn’t Practical

Although you can technically assign z-index: 999999;, it’s not a great idea. Stick to a system for clarity:

  • 0-10: Default elements.

  • 10-50: Navigation or overlays.

  • 100+: Pop-ups or modals.

Fun Fact #7: Debugging Z-Index Issues

Use your browser’s developer tools to inspect elements and understand their stacking contexts. This can save hours of frustration!

Z-Index in Action: A Simple Example

Here’s how you can use z-index to stack elements:

<div style="position: relative; z-index: 1; background: lightblue; width: 100px; height: 100px;">
    Box 1
</div>
<div style="position: relative; z-index: 2; background: lightgreen; width: 100px; height: 100px; margin-top: -50px;">
    Box 2
</div>

In this case, Box 2 will appear on top of Box 1 because it has a higher z-index value.

Output

Pro Tips for Mastering Z-Index

  1. Plan Your Layers: Think of your webpage as layers in Photoshop. Assign z-index values logically to avoid conflicts.

  2. Avoid Z-Index Overkill: Instead of piling on high values, fix the root issue by managing stacking contexts.

  3. Test Across Devices: Overlapping issues can behave differently on mobile screens, so always test thoroughly.

Conclusion

So, the next time a tooltip or modal goes missing, remember: it’s all about the z-index. 😊

CSSz-index