Z-Index: Controlling Stacking Order

Have you ever placed two things on a web page and they ended up on top of each other in a weird way? Maybe a button hid behind an image, or a menu disappeared under a banner. That’s where z-index comes in.

In this beginner-friendly guide, you’ll learn what z-index is, how it controls which element appears “on top,” and how to use it step-by-step with clear examples. By the end, you’ll be able to fix common overlapping problems and create cleaner, more professional layouts.

---

What is z-index?

On a web page, elements are normally arranged in two directions:

• Left to right / top to bottom (the usual layout)
• Front to back (which one is visually on top of another)

The front to back direction is called the stacking order. Think of it like a stack of papers on a desk: one paper is on top, some are in the middle, and one is at the bottom.

z-index is a CSS property that controls this stacking order. A higher z-index value means the element appears closer to you (on top). A lower value means it appears behind other elements.

---

Important rule: Positioning matters

z-index only works on elements that have certain types of positioning. Don’t worry if this is new — we’ll keep it simple.

z-index works when the element has:

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

If you use z-index on an element with the default position: static; (the browser’s default), it won’t do anything.

So, remember this formula:

To use z-index, first set a position other than static.

---

Example 1: Two overlapping boxes

Let’s start with a simple example: two colored boxes that overlap.

HTML

<div class="box box-red">Red Box</div>
<div class="box box-blue">Blue Box</div>

CSS

/* Basic style for both boxes */
.box {
  width: 150px;
  height: 150px;
  color: white;
  font-family: Arial, sans-serif;
  display: flex;              /* Center the text */
  justify-content: center;
  align-items: center;
  position: relative;         /* Enable z-index to work */
}

.box-red {
  background: red;
}

.box-blue {
  background: blue;
  margin-left: -50px;         /* Move blue box left to overlap red */
  margin-top: -50px;          /* Move blue box up to overlap red */
}

What happens here?

• We created two boxes: one red, one blue.
• Both have position: relative; so z-index can work.
• The blue box is shifted up and left using negative margins, so it overlaps the red box.

Without any z-index, the browser shows the blue box on top, because it appears later in the HTML. By default, elements that come later in the code appear above earlier ones when they overlap.

Try it yourself

Open a simple HTML file, paste this code inside, and open it in your browser. Then swap the order of the two <div> elements in the HTML and see how the stacking changes.

---

Example 2: Using z-index to control which box is on top

Now, let’s use z-index to decide which box should be on top.

Update the CSS like this:

.box-red {
  background: red;
  z-index: 10;      /* Higher value: should be on top */
}

.box-blue {
  background: blue;
  margin-left: -50px;
  margin-top: -50px;
  z-index: 5;       /* Lower value: should be behind */
}

What changed?

• We added z-index: 10; to the red box.
• We added z-index: 5; to the blue box.

Now, even though the blue box still appears later in the HTML and overlaps in the same way, the red box will appear on top, because 10 is greater than 5.

You can think of z-index like layers:

• z-index: 10 → top layer
• z-index: 5 → middle layer
• z-index: 1 → lower layer

Try it yourself

Change the numbers:

• Set the red box to z-index: 1
• Set the blue box to z-index: 999

You’ll see the blue box jump to the top, even with a different number order in HTML.

---

Example 3: Making a fixed header stay on top

A common real-world use of z-index is keeping a navigation bar or header on top when the page scrolls.

HTML

<header class="site-header">My Website</header>

<p>Lots of content here...</p>
<p>More content...</p>
<p>Keep adding paragraphs to make the page scroll.</p>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.site-header {
  position: fixed;      /* Stay at the top even when scrolling */
  top: 0;               /* Stick to the very top */
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 15px;
  z-index: 1000;        /* Make sure it’s above other elements */
}

p {
  padding: 20px;
}

What happens here?

• position: fixed; pins the header to the top of the screen.
• Without z-index, other elements might overlap it in some layouts.
• Adding z-index: 1000; makes the header stay on top of other content.

You don’t have to use huge numbers, but it’s common to pick something clearly higher than other elements you expect on the page.

Try it yourself

Add another element like a big banner with a high z-index and see what happens:

.banner {
  position: relative;
  background: orange;
  padding: 50px;
  z-index: 2000;  /* Higher than the header’s 1000 */
}

You’ll see the banner appear over the header when they overlap.

---

Example 4: Simple tooltip on hover

Let’s build a tiny, practical feature: a tooltip that appears over text when you hover your mouse.

HTML

<p>
  Hover over this 
  <span class="tooltip-wrapper">
    word
    <span class="tooltip">I am a tooltip on top!</span>
  </span>
  to see a tooltip.
</p>

CSS

.tooltip-wrapper {
  position: relative;          /* Parent for absolute tooltip */
  color: blue;
  cursor: pointer;
}

.tooltip {
  position: absolute;          /* Position relative to wrapper */
  bottom: 120%;                /* Place above the word */
  left: 0;
  background: black;
  color: white;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;                  /* Hidden by default */
  z-index: 50;                 /* Ensure it appears on top */
  transition: opacity 0.2s;    /* Smooth fade-in */
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;                  /* Show on hover */
}

How this works

• The outer span.tooltip-wrapper is position: relative; so the inner tooltip can be placed exactly where we want it.
• The tooltip itself is position: absolute; and uses bottom: 120%; to sit above the word.
• z-index: 50; makes sure the tooltip appears above other nearby elements.
• When you hover over the word, the tooltip fades in.

This is a simple but powerful example of how z-index lets you create layered, interactive experiences.

---

Common z-index mistakes (and how to avoid them)

1. Forgetting to set position
If you use z-index on an element with position: static; (the default), nothing will happen.

Fix: Always set position: relative; (or absolute, fixed, sticky) before using z-index.

---

2. Using huge random numbers
It’s tempting to write z-index: 99999; for everything.

Fix: Use simple, meaningful ranges like:

• 10 for normal overlays
• 100 for menus/popups
• 1000 for global headers

---

3. Expecting z-index to cross every boundary
Sometimes, elements are inside different parent containers that create separate “stacks” (called stacking contexts). Then z-index might not behave as you expect.

For beginners, the main tip is:

• If z-index isn’t working, check the parent elements for special properties like position and z-index that might be creating their own stacking contexts.

---

Quick recap

You’ve learned:

• z-index controls which elements appear on top when they overlap.
• It only works when the element has position: relative, absolute, fixed, or sticky.
• Higher z-index values appear in front of lower ones.
• You can use z-index to:
  • Decide which box is on top
  • Keep headers above content
  • Show tooltips, popups, and overlays

What’s next?

To keep improving:

• Experiment with more overlapping elements and different z-index values.
• Try building a simple modal popup that appears over a dark background.
• Look at sites you like and imagine which parts use z-index to layer content.

Learning layout can feel tricky at first, but each small experiment builds your skills. You’ve just unlocked an important tool for controlling how your pages look and feel — keep going and keep playing with the code!