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
<div class="relative" style="height:170px">
<div class="absolute rounded-lg p-2 small font-semibold border bg-surface-2 z-3" style="top:0;left:0;width:150px;height:90px">
z-3
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-primary-subtle z-2" style="top:20px;left:40px;width:150px;height:90px">
z-2
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-success-subtle z-1" style="top:40px;left:80px;width:150px;height:90px">
z-1
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-warning-subtle z-0" style="top:60px;left:120px;width:150px;height:90px">
z-0
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-danger-subtle -z-1" style="top:80px;left:160px;width:150px;height:90px">
z-n1
</div>
</div>2Order without z-index
Without z-index, later elements paint on top of earlier ones.
first
second (on top)
<div class="relative" style="height:130px">
<div class="absolute rounded-lg p-2 small font-semibold border bg-primary-subtle" style="top:0;left:0;width:160px;height:90px">
first
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-info-subtle" style="top:30px;left:60px;width:160px;height:90px">
second (on top)
</div>
</div>3Bring the first one forward
z-1 on the first element puts it above its later sibling.
first, z-1
second
<div class="relative" style="height:130px">
<div class="absolute rounded-lg p-2 small font-semibold border bg-primary-subtle z-1" style="top:0;left:0;width:160px;height:90px">
first, z-1
</div>
<div class="absolute rounded-lg p-2 small font-semibold border bg-info-subtle" style="top:30px;left:60px;width:160px;height:90px">
second
</div>
</div>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.
Strategy, design and code under one roof
Thousands of clients already trust us, and we work hard to keep it that way.
<div class="relative z-0 p-6">
<div class="absolute top-0 start-0 bg-primary-subtle rounded-full -z-1" style="width:120px;height:120px">
</div>
<h3 class="h5 font-semibold">Strategy, design and code under one roof</h3>
<p class="small mb-0">Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>5Overlapping avatars
Decreasing z-index keeps the first avatar on top of the stack.
<div class="flex">
<img src="../assets/img/avatar-6.svg" alt="Diego Novak" width="44" height="44" class="rounded-full border border-2 border-white relative z-3"> <img src="../assets/img/avatar-7.svg" alt="Sofia Lindqvist" width="44" height="44" class="rounded-full border border-2 border-white relative z-2" style="margin-left:-14px"> <img src="../assets/img/avatar-8.svg" alt="Ethan Alvarez" width="44" height="44" class="rounded-full border border-2 border-white relative z-1" style="margin-left:-14px"> <img src="../assets/img/avatar-9.svg" alt="Nadia Ortega" width="44" height="44" class="rounded-full border border-2 border-white relative z-0" style="margin-left:-14px">
</div>6Active button above its neighbours
In joined button rows the active one gets z-1 so its border is not hidden.
<div class="flex">
<button type="button" class="btn btn-outline-secondary rounded-none rounded-s-md relative">Day</button>
<button type="button" class="btn btn-outline-primary rounded-none relative z-1 active" style="margin-left:-1px" aria-pressed="true">Week</button>
<button type="button" class="btn btn-outline-secondary rounded-none rounded-e-md relative" style="margin-left:-1px">Month</button>
</div>7Badge over a card image
The badge uses z-2 so it stays above an overlay with z-1.
product
<div class="relative rounded-xl overflow-hidden" style="max-width:20rem">
<img src="https://images.unsplash.com/photo-1742440710453-d5db3a357362?auto=format&fit=crop&w=1200&h=800&q=70" alt="What our clients asked us most" class="w-full block">
<div class="absolute top-0 start-0 w-full h-full bg-dark/25 z-1">
</div>
<span class="absolute top-0 start-0 m-2 badge text-bg-warning z-2">product</span>
</div>8Floating label above a chart
A z-3 label stays above grid lines and bars.
<div class="relative border rounded-lg p-4" style="height:150px">
<div class="absolute start-0 end-0 border-t z-0" style="top:50px">
</div>
<div class="absolute start-0 end-0 border-t z-0" style="top:100px">
</div>
<div class="flex items-end gap-2 h-full relative z-1">
<div class="bg-primary-subtle flex-auto h-1/2 rounded-t-md">
</div>
<div class="bg-primary flex-auto h-3/4 rounded-t-md">
</div>
<div class="bg-primary-subtle flex-auto h-1/4 rounded-t-md">
</div>
</div>
<span class="absolute top-0 start-1/2 -translate-x-1/2 mt-2 badge text-bg-dark z-3">Peak 237</span>
</div>9Sticky header layer
A sticky header with z-2 stays above rows that have their own positioned badges.
Team
Aria Whitaker new
Lucas Delgado
Ivy Rossi
Isla Brennan
Finn Varga
<div class="border rounded-lg overflow-auto" style="height:160px">
<div class="sticky-top z-2 bg-surface-2 px-4 py-2 small font-semibold">
Team
</div>
<div class="px-4 py-2 border-b relative">
Aria Whitaker <span class="badge text-bg-success relative z-1">new</span>
</div>
<div class="px-4 py-2 border-b">
Lucas Delgado
</div>
<div class="px-4 py-2 border-b">
Ivy Rossi
</div>
<div class="px-4 py-2 border-b">
Isla Brennan
</div>
<div class="px-4 py-2">
Finn Varga
</div>
</div>10Cards in a fan
Rotated cards stacked with z-1 to z-3.
z-1z-2z-3<div class="relative mx-auto" style="height:170px;max-width:18rem">
<div class="absolute top-1/2 start-1/2 bg-page border rounded-lg shadow-sm p-4 z-1" style="width:140px;transform:translate(-80%,-50%) rotate(-10deg)">
<div class="small">
<code class="small">z-1</code>
</div>
</div>
<div class="absolute top-1/2 start-1/2 bg-page border rounded-lg shadow-sm p-4 z-2" style="width:140px;transform:translate(-50%,-50%)">
<div class="small">
<code class="small">z-2</code>
</div>
</div>
<div class="absolute top-1/2 start-1/2 bg-page border rounded-lg shadow-sm p-4 z-3" style="width:140px;transform:translate(-20%,-50%) rotate(10deg)">
<div class="small font-bold">
<code class="small">z-3</code>
</div>
</div>
</div>11Image behind a heading
The hero image sits on z-n1 inside a z-0 context, the text sits on top.
Brands that stand out and sell
We keep things simple, so you can focus on what matters to you.
<div class="relative z-0 rounded-xl overflow-hidden p-6 text-white bg-dark" style="min-height:180px">
<img src="https://images.unsplash.com/photo-1742440710453-d5db3a357362?auto=format&fit=crop&w=1600&h=700&q=70" alt="" class="absolute top-0 start-0 w-full h-full object-cover -z-1">
<div class="absolute top-0 start-0 w-full h-full bg-dark/50 -z-1">
</div>
<h3 class="h4 font-bold">Brands that stand out and sell</h3>
<p class="mb-0 small">We keep things simple, so you can focus on what matters to you.</p>
</div>12Focus ring over siblings
List group items lift their active item with z-1 so its border shows on both edges.
- Web
- Web
<ul class="list-unstyled mb-0" style="max-width:18rem">
<li class="border px-4 py-2 rounded-t-md relative">Web</li>
<li class="border border-primary bg-primary-subtle px-4 py-2 relative z-1" style="margin-top:-1px">Print</li>
<li class="border px-4 py-2 rounded-b-md relative" style="margin-top:-1px">Web</li>
</ul>13Notification over a header
A count badge on z-3 overlaps the next header item.
31
<div class="flex gap-4 border rounded-lg p-4 items-center">
<span class="relative text-xl"><i class="bi bi-bell-fill" aria-hidden="true"></i><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger z-3 text-base">31</span></span> <span class="relative text-xl bg-page rounded-md px-2"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span>
</div>14Stacked paper effect
Two layers on z-n1 behind a card look like a pile of pages.
Branding
15 documents
<div class="relative z-0 mx-auto" style="max-width:20rem">
<div class="absolute top-0 start-0 w-full h-full bg-surface-2 border rounded-lg -z-1" style="transform:translate(8px,8px)">
</div>
<div class="absolute top-0 start-0 w-full h-full bg-surface-3 border rounded-lg -z-1" style="transform:translate(4px,4px)">
</div>
<div class="bg-page border rounded-lg p-4">
<div class="font-semibold">
Branding
</div>
<div class="small text-muted">
15 documents
</div>
</div>
</div>15Overlapping sections
A card with z-1 overlaps the coloured band above it via a negative top offset.
Ideas worth talking about
Small teams, short feedback loops and no handoffs lost in translation.
<div>
<div class="text-bg-primary rounded-t-xl p-6 pb-12">
<h3 class="h5 mb-0">Ideas worth talking about</h3>
</div>
<div class="relative z-1 bg-page border rounded-xl shadow-sm p-4 mx-4" style="margin-top:-2rem">
Small teams, short feedback loops and no handoffs lost in translation.
</div>
</div>16Corner ribbon above a border
A z-2 ribbon overlaps the card border.
Overdue
Web design
We measure success by how many clients come back and tell their friends.
<div class="relative border border-2 rounded-xl p-6" style="max-width:18rem">
<span class="absolute top-0 end-0 -translate-y-1/2 me-4 badge text-bg-success z-2">Overdue</span>
<div class="font-semibold">
Web design
</div>
<div class="small text-muted">
We measure success by how many clients come back and tell their friends.
</div>
</div>17Hover card layer (static preview)
A preview popover on z-3 overlapping a list.
- Ruby Moreau
- Chloe Whitaker
- Omar Patel
Clients stay with us for years because we treat their brand like our own.
<div class="relative" style="height:150px">
<ul class="list-unstyled border rounded-lg mb-0">
<li class="px-4 py-2 border-b">Ruby Moreau</li>
<li class="px-4 py-2 border-b">Chloe Whitaker</li>
<li class="px-4 py-2">Omar Patel</li>
</ul>
<div class="absolute bg-page border rounded-lg shadow-md p-4 z-3 small" style="top:20px;left:40%;width:13rem">
Clients stay with us for years because we treat their brand like our own.
</div>
</div>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
<div class="row g-2">
<div class="col-6">
<div class="bg-info-subtle border rounded-lg p-4 z-3 small">
z-3, static (ignored)
</div>
</div>
<div class="col-6">
<div class="bg-info-subtle border rounded-lg p-4 z-3 relative small">
z-3, position-relative
</div>
</div>
</div>19Price tag over a product
A z-1 price tag over the product image and a z-2 heart button above it.
$32.30
<div class="relative rounded-xl overflow-hidden border" style="max-width:16rem">
<img src="../assets/img/product-11.svg" alt="Packaging design" class="w-full block"> <span class="absolute bottom-0 start-0 m-2 badge text-bg-dark z-1">$32.30</span>
<button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2 z-2" aria-label="Save"><i class="bi bi-heart-fill" aria-hidden="true"></i></button>
</div>20Dropdown above content
An open menu at z-3 overlaps the panel below it.
- Newest
- Price low to high
- Rating
Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.
<div class="relative" style="height:170px">
<button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-sort-down" aria-hidden="true"></i> Sort</button>
<ul class="absolute list-unstyled bg-page border rounded-lg shadow-md py-1 mt-1 z-3 small mb-0" style="width:11rem">
<li class="px-4 py-1">Newest</li>
<li class="px-4 py-1 bg-primary-subtle">Price low to high</li>
<li class="px-4 py-1">Rating</li>
</ul>
<div class="bg-surface-3 border rounded-lg p-4 mt-2 small">
Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.
</div>
</div>