Skip to content
  • Theme mode
Notifications
Ava Alvarez sent a new order
6 hours agoLiam Duarte commented on your task
13 hours agoAria Moreau sent a new order
just now
View all

Z-index

Z-index utilities change the stacking order of positioned elements: z-n1 sends an element behind its context, z-0 creates a base layer and z-1, z-2 and z-3 bring elements forward. They only apply to elements with a position, so pair them with position-relative or position-absolute.

1Z-index scale

z-n1, z-0, z-1, z-2 and z-3 stack positioned elements from back to front.

z-3
z-2
z-1
z-0
z-n1

2Order without z-index

Without z-index, later elements paint on top of earlier ones.

first
second (on top)

3Bring the first one forward

z-1 on the first element puts it above its later sibling.

first, z-1
second

4Background shape behind content

z-n1 places a decorative shape behind the text of its positioned parent, which uses z-0 to form a stacking context.

Three days that change how you work

A powerful community makes data easy to understand without extra tools.

5Overlapping avatars

Decreasing z-index keeps the first avatar on top of the stack.

Kenji Mensah Noah Carter Ava Varga Liam Fischer

6Active button above its neighbours

In joined button rows the active one gets z-1 so its border is not hidden.

7Badge over a card image

The badge uses z-2 so it stays above an overlay with z-1.

The focused release checklist
tutorial

8Floating label above a chart

A z-3 label stays above grid lines and bars.

Peak 921

9Sticky header layer

A sticky header with z-2 stays above rows that have their own positioned badges.

Team
Kenji Larsen new
Ella Okafor
Freya Hughes
Jonah Varga
Isla Delgado

10Cards in a fan

Rotated cards stacked with z-1 to z-3.

z-1
z-2
z-3

11Image behind a heading

The hero image sits on z-n1 inside a z-0 context, the text sits on top.

Experiences people talk about

Our sponsorship helps decisions quicker and clearer with friendly support.

12Focus ring over siblings

List group items lift their active item with z-1 so its border shows on both edges.

  • Panel
  • Webinar
  • Webinar

13Notification over a header

A count badge on z-3 overlaps the next header item.

51

14Stacked paper effect

Two layers on z-n1 behind a card look like a pile of pages.

Meetup
38 documents

15Overlapping sections

A card with z-1 overlaps the coloured band above it via a negative top offset.

Three days that change how you work

The new world-class speakers keeps complex tasks into simple steps for teams of every size.

16Corner ribbon above a border

A z-2 ribbon overlaps the card border.

Overdue
Ticketing
Our ticketing keeps new ideas to life on any device.

17Hover card layer (static preview)

A preview popover on z-3 overlapping a list.

  • Amara Patel
  • Kenji Ortega
  • Mason Moreau
The new certificates keeps results you can measure all year round.

18Z-index needs a position

z-* only works on positioned elements: the left box has no position, the right one has position-relative.

z-3, static (ignored)
z-3, position-relative

19Price tag over a product

A z-1 price tag over the product image and a z-2 heart button above it.

Workshop ticket $14.91

20Dropdown above content

An open menu at z-3 overlaps the panel below it.

  • Newest
  • Price low to high
  • Rating
This elegant dashboard lets you focused on what matters from the very first day. The new networking lounges guides the whole team on the same page for teams of every size.