🤔 Z Index Overlapping
In CSS Grid, items can overlap when they're placed in the same grid cell or span across the same area. When this happens, the z-index property is used to control which item appears on top.
📌 When Do Grid Items Overlap?
When two or more items are explicitly positioned into the same cell or overlapping grid areas using
grid-row/grid-column.When you use negative margins, absolute positioning, or overlapping content intentionally.
🧭 z-index in Grid Items
By default, grid items follow the HTML source order to stack.
To control the stack order manually, use
z-indexon items withpositionset to anything other than static (relative,absolute,fixed, orsticky).
✅ Example: Overlapping Grid Items with z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Grid: z-index Overlap</title>
<style>
.infographic-zindex {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-zindex[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.zi-inner { padding: 0.5rem; }
.zi-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.zi-code-wrap {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
overflow: hidden;
}
.zi-filetabs {
display: flex;
background: #161616;
border-bottom: 1px solid #2a2a2a;
}
.zi-filetab {
border: none;
background: transparent;
color: #8a8a8a;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.zi-filetab:hover { color: #e5e5e5; }
.zi-filetab.zi-tab-on {
color: #ffffff;
border-bottom-color: #5b8def;
background: #0b0b0b;
}
.zi-code {
padding: 1rem 1.8rem 1rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
line-height: 1.85;
overflow-x: auto;
}
.zi-codepane { display: none; }
.zi-codepane.zi-pane-on { display: block; }
.zi-line { display: block; white-space: pre; color: #e5e5e5; padding: 0.05rem 0.4rem; border-radius: 5px; transition: background 0.2s ease, box-shadow 0.2s ease; }
.zi-line.zi-active-1 { background: rgba(220,20,60,0.18); box-shadow: inset 3px 0 0 crimson; color: #ffffff; }
.zi-line.zi-active-2 { background: rgba(65,105,225,0.2); box-shadow: inset 3px 0 0 royalblue; color: #ffffff; }
.zi-tag { color: #60a5fa; font-weight: 700; }
.zi-attr { color: #f2b96b; }
.zi-str { color: #9ece6a; }
.zi-sel { color: #f472b6; font-weight: 700; }
.zi-prop { color: #c586c0; }
.zi-val { color: #ce9178; }
.zi-val-z {
font-weight: 700;
padding: 0.05rem 0.35rem;
border-radius: 4px;
}
.zi-browser {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.zi-browser-bar {
background: var(--paper-alt);
padding: 0.5rem 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.zi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.zi-tab {
background: var(--paper);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
padding: 0.25rem 0.6rem;
}
.zi-controlrow {
background: var(--paper-alt);
padding: 0.5rem 0.7rem 0.7rem;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.zi-control-label {
font-size: 0.72rem;
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
}
.zi-segmented {
display: flex;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.zi-seg-btn {
border: none;
background: var(--paper);
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.7rem;
font-weight: 700;
padding: 0.35rem 0.7rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.zi-seg-btn + .zi-seg-btn { border-left: 1px solid var(--line); }
.zi-seg-btn.zi-seg-on-1 { background: crimson; color: #ffffff; }
.zi-seg-btn.zi-seg-on-2 { background: royalblue; color: #ffffff; }
.zi-screen {
background: #ffffff;
padding: 1.2rem 1.4rem 1.4rem;
}
.zi-out-grid {
display: grid;
grid-template-columns: repeat(3, 90px);
grid-template-rows: repeat(2, 90px);
gap: 10px;
}
.zi-out-item {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
box-sizing: border-box;
border-radius: 4px;
transition: z-index 0.15s ease;
font-size: 0.85rem;
}
.zi-out-item1 { background-color: crimson; grid-column: 1 / 3; grid-row: 1 / 2; }
.zi-out-item2 { background-color: royalblue; grid-column: 2 / 4; grid-row: 1 / 2; opacity: 0.92; }
.zi-note {
font-size: 0.82rem;
color: var(--ink-soft);
padding: 0 0.2rem;
}
.zi-note strong { color: var(--ink); }
.zi-note code {
font-family: "SFMono-Regular", Consolas, monospace;
background: var(--paper-alt);
padding: 0.05rem 0.3rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="infographic-zindex" id="zi-root">
<div class="zi-inner">
<div class="zi-layout">
<div class="zi-code-wrap">
<div class="zi-filetabs">
<button class="zi-filetab zi-tab-on" id="zi-tab-html">index.html</button>
<button class="zi-filetab" id="zi-tab-css">style.css</button>
</div>
<div class="zi-code">
<div class="zi-codepane zi-pane-on" id="zi-pane-html">
<span class="zi-line"><<span class="zi-tag">div</span> <span class="zi-attr">class</span>=<span class="zi-str">"grid"</span>></span>
<span class="zi-line zi-active-1"> <<span class="zi-tag">div</span> <span class="zi-attr">class</span>=<span class="zi-str">"item item1"</span>>Item 1</<span class="zi-tag">div</span>></span>
<span class="zi-line zi-active-2"> <<span class="zi-tag">div</span> <span class="zi-attr">class</span>=<span class="zi-str">"item item2"</span>>Item 2</<span class="zi-tag">div</span>></span>
<span class="zi-line"></<span class="zi-tag">div</span>></span>
</div>
<div class="zi-codepane" id="zi-pane-css">
<span class="zi-line"><span class="zi-sel">.grid</span> {</span>
<span class="zi-line"> <span class="zi-prop">display</span>: <span class="zi-val">grid</span>;</span>
<span class="zi-line"> <span class="zi-prop">grid-template-columns</span>: <span class="zi-val">repeat(3, 100px)</span>;</span>
<span class="zi-line"> <span class="zi-prop">grid-template-rows</span>: <span class="zi-val">repeat(2, 100px)</span>;</span>
<span class="zi-line"> <span class="zi-prop">gap</span>: <span class="zi-val">10px</span>;</span>
<span class="zi-line">}</span>
<span class="zi-line"><span class="zi-sel">.item</span> {</span>
<span class="zi-line"> <span class="zi-prop">display</span>: <span class="zi-val">flex</span>;</span>
<span class="zi-line"> <span class="zi-prop">align-items</span>: <span class="zi-val">center</span>;</span>
<span class="zi-line"> <span class="zi-prop">justify-content</span>: <span class="zi-val">center</span>;</span>
<span class="zi-line"> <span class="zi-prop">font-weight</span>: <span class="zi-val">bold</span>;</span>
<span class="zi-line"> <span class="zi-prop">color</span>: <span class="zi-val">white</span>;</span>
<span class="zi-line">}</span>
<span class="zi-line zi-active-1" id="zi-line-item1"><span class="zi-sel">.item1</span> {</span>
<span class="zi-line zi-active-1" id="zi-line-item1b"> <span class="zi-prop">background-color</span>: <span class="zi-val">crimson</span>;</span>
<span class="zi-line zi-active-1" id="zi-line-item1c"> <span class="zi-prop">grid-column</span>: <span class="zi-val">1 / 3</span>;</span>
<span class="zi-line zi-active-1" id="zi-line-item1d"> <span class="zi-prop">grid-row</span>: <span class="zi-val">1 / 2</span>;</span>
<span class="zi-line zi-active-1" id="zi-line-item1z"> <span class="zi-prop">z-index</span>: <span class="zi-val zi-val-z" id="zi-z-item1" style="background: crimson;">1</span>;</span>
<span class="zi-line zi-active-1" id="zi-line-item1e">}</span>
<span class="zi-line zi-active-2" id="zi-line-item2"><span class="zi-sel">.item2</span> {</span>
<span class="zi-line zi-active-2" id="zi-line-item2b"> <span class="zi-prop">background-color</span>: <span class="zi-val">royalblue</span>;</span>
<span class="zi-line zi-active-2" id="zi-line-item2c"> <span class="zi-prop">grid-column</span>: <span class="zi-val">2 / 4</span>;</span>
<span class="zi-line zi-active-2" id="zi-line-item2d"> <span class="zi-prop">grid-row</span>: <span class="zi-val">1 / 2</span>;</span>
<span class="zi-line zi-active-2" id="zi-line-item2z"> <span class="zi-prop">z-index</span>: <span class="zi-val zi-val-z" id="zi-z-item2" style="background: royalblue;">2</span>;</span>
<span class="zi-line zi-active-2" id="zi-line-item2e">}</span>
</div>
</div>
</div>
<div class="zi-browser">
<div class="zi-browser-bar">
<span class="zi-dot"></span><span class="zi-dot"></span><span class="zi-dot"></span>
<div class="zi-tab">🌐 Grid Z-Index Example</div>
</div>
<div class="zi-controlrow">
<span class="zi-control-label">bring to front:</span>
<div class="zi-segmented" id="zi-segmented">
<button class="zi-seg-btn" data-val="item1">Item 1 (red)</button>
<button class="zi-seg-btn zi-seg-on-2" data-val="item2">Item 2 (blue)</button>
</div>
</div>
<div class="zi-screen">
<div class="zi-out-grid" id="zi-out-grid">
<div class="zi-out-item zi-out-item1" id="zi-out-item1" style="z-index: 1;">Item 1</div>
<div class="zi-out-item zi-out-item2" id="zi-out-item2" style="z-index: 2;">Item 2</div>
</div>
</div>
</div>
<div class="zi-note" id="zi-note">
Both items land on <strong>column 2, row 1</strong> — their <code>grid-column</code> ranges overlap. With <code>z-index: 2</code>, <strong>Item 2 (blue)</strong> paints on top of Item 1 in the shared cell.
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('zi-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const tabHtml = document.getElementById('zi-tab-html');
const tabCss = document.getElementById('zi-tab-css');
const paneHtml = document.getElementById('zi-pane-html');
const paneCss = document.getElementById('zi-pane-css');
tabHtml.addEventListener('click', () => {
tabHtml.classList.add('zi-tab-on');
tabCss.classList.remove('zi-tab-on');
paneHtml.classList.add('zi-pane-on');
paneCss.classList.remove('zi-pane-on');
});
tabCss.addEventListener('click', () => {
tabCss.classList.add('zi-tab-on');
tabHtml.classList.remove('zi-tab-on');
paneCss.classList.add('zi-pane-on');
paneHtml.classList.remove('zi-pane-on');
});
const buttons = document.querySelectorAll('.zi-seg-btn');
const item1 = document.getElementById('zi-out-item1');
const item2 = document.getElementById('zi-out-item2');
const zItem1 = document.getElementById('zi-z-item1');
const zItem2 = document.getElementById('zi-z-item2');
const note = document.getElementById('zi-note');
const notes = {
item1: 'Both items land on <strong>column 2, row 1</strong> — their <code>grid-column</code> ranges overlap. With <code>z-index: 2</code>, <strong>Item 1 (red)</strong> now paints on top of Item 2 in the shared cell.',
item2: 'Both items land on <strong>column 2, row 1</strong> — their <code>grid-column</code> ranges overlap. With <code>z-index: 2</code>, <strong>Item 2 (blue)</strong> paints on top of Item 1 in the shared cell.'
};
function setFront(which) {
buttons.forEach(b => {
const isThis = b.getAttribute('data-val') === which;
b.classList.toggle('zi-seg-on-1', isThis && which === 'item1');
b.classList.toggle('zi-seg-on-2', isThis && which === 'item2');
});
if (which === 'item1') {
item1.style.zIndex = 2;
item2.style.zIndex = 1;
zItem1.textContent = '2';
zItem2.textContent = '1';
} else {
item1.style.zIndex = 1;
item2.style.zIndex = 2;
zItem1.textContent = '1';
zItem2.textContent = '2';
}
note.innerHTML = notes[which];
tabCss.click();
}
buttons.forEach(btn => {
btn.addEventListener('click', () => setFront(btn.getAttribute('data-val')));
});
})();
</script>
</body>
</html>🔍 Explanation:
Both items overlap in the middle (
grid-column: 2 / 3).item2has a higherz-index, so it appears on top ofitem1.
⚠️ Notes:
z-indexonly works ifpositionis notstatic.Overlapping is usually not common in standard grid layouts, but can be powerful for complex designs (e.g., cards, overlays, layer effects).