Skip to content
Notifications
Noah Duarte sent a new order
20 hours agoSofia Ibrahim joined the team
18 hours agoNora Rossi joined the team
13 hours ago
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.

Home is closer than you think

Most of our homes sell within six weeks, often above the asking price.

5Overlapping avatars

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

Ivy Patel Elena Hughes Samir Whitaker Hana Ortega

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.

A first-time buyer's checklist
case study

8Floating label above a chart

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

Peak 834

9Sticky header layer

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

Team
Ella Haddad new
Theo Quinn
Luna Delgado
Tariq Moreau
Ruby Duarte

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.

Smart property search, real advice

Clear prices, honest advice and no surprises along the way.

12Focus ring over siblings

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

  • Villas
  • Commercial
  • Villas

13Notification over a header

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

24

14Stacked paper effect

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

Commercial
16 documents

15Overlapping sections

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

Buy, sell or rent with confidence

Thousands of buyers already trust us, and we work hard to keep it that way.

16Corner ribbon above a border

A z-2 ribbon overlaps the card border.

Draft
Virtual tours
We keep things simple, so you can focus on what matters to you.

17Hover card layer (static preview)

A preview popover on z-3 overlapping a list.

  • Ravi Okafor
  • Isla Sato
  • Mateo Ibrahim
Mortgage advisors help you understand what you can afford before you start.

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.

Retail unit $39.20

20Dropdown above content

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

  • Newest
  • Price low to high
  • Rating
Honest advice comes first, even when it means waiting for the right home. We listen first, then build a plan around what you actually need.