z-index only works on positioned elements and is affected by stacking contexts. To use it effectively: 1. Apply position: relative, absolute, fixed, or sticky before z-index; 2. Understand that z-index operates within stacking contexts, which are created by properties like z-index itself, opacity, transform, and others; 3. Start with low z-index values and increase as needed; 4. Keep related elements in the same parent container; 5. Use browser developer tools to inspect stacking order; 6. Avoid unnecessary stacking contexts unless required; 7. Organize CSS with comments or naming conventions for clarity.

z-index controls the stacking order of positioned elements. If two elements overlap, the one with a higher z-index value will appear on top. But it only works on elements that have a position value other than static — like relative, absolute, fixed, or sticky.

Here’s what you need to know about how it actually behaves in real use.

How Positioning Affects z-index

Before z-index does anything, the element must be positioned. That means setting position: relative, absolute, fixed, or sticky. If you set z-index on a static element (the default), it won’t do anything.

For example:

.box {
  position: relative;
  z-index: 10;
}

This .box will respect the z-index because it's positioned. But if you forget the position property, the z-index is ignored.

So always pair them together:

• Use position to take the element out of normal document flow
• Then use z-index to control its layer

Stacking Contexts Matter More Than You Think

One thing many developers miss early on is that z-index doesn’t work globally. It only affects elements within the same stacking context.

A stacking context is created when:

• An element has a z-index and position set
• Or when an element has opacity < 1
• Or transform, filter, will-change, etc.

What this means is: even if an element has a z-index of 9999, it can still end up behind something with a lower number — if they belong to different stacking contexts.

Think of it like layers in Photoshop. Elements inside one group don't mix with elements in another group. So the parent container's stacking level plays a big role.

Practical Tips for Using z-index

When things get layered — like modals, tooltips, dropdowns — here are some tips to avoid confusion:

• ? Start low and go high — Don’t start at 9999 unless necessary. Try 1, 2, 3… it makes debugging easier.
• ? Keep related elements in the same parent — Especially when using modals or overlays.
• ? Use browser dev tools to inspect stacking order — Right-click > Inspect and check which parent context each item belongs to.
• ? Avoid unnecessary stacking contexts — Like opacity: 0.99 or transform: translateZ(0) unless needed.

Also, consider organizing your CSS with naming or comments:

/* Base UI */
.header { z-index: 10; }

/* Overlays */
.modal { z-index: 100; }

/* Top-most alerts */
.tooltip { z-index: 1000; }

That’s basically how z-index works with positioned elements. It seems simple until you hit that moment where nothing appears on top no matter what number you give it — and then it all comes down to stacking contexts.

The above is the detailed content of How does `z-index` work with positioned elements?. For more information, please follow other related articles on the PHP Chinese website!