From 1146b74eb9612f02f724e0b08b95527b2ac7b4c0 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Tue, 28 Oct 2025 05:17:16 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to "What Is the
Z-Index Property, and How Does It Work to Control the Stacking of Positioned
Elements?" lesson (#63122)
---
.../672c3aa9bc3a481425cb52b3.md | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md b/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
index 1aa770bef59..3d4c7f7fad6 100644
--- a/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
+++ b/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-z-index-property
---
-# --description--
+# --interactive--
The `z-index` property in CSS is used to control the vertical stacking order of positioned elements that overlap on the page. When multiple elements are stacked on top of each other, the `z-index` value determines which element appears on top. The higher the `z-index` value, the closer the element is to the viewer, while lower values place the element farther back in the stack.
@@ -21,6 +21,17 @@ However, the `z-index` only works on elements that are positioned, which means t
Now, we can apply some styles to position the boxes to overlap on each other like this:
+:::interactive_editor
+
+```html
+
+
+
Box 1
+
Box 2
+
Box 3
+
+```
+
```css
.container {
position: relative;
@@ -60,6 +71,8 @@ Now, we can apply some styles to position the boxes to overlap on each other lik
}
```
+:::
+
For the container, the positioning will be set to `relative` and all of the boxes nested inside will be set to `absolute` positioning. Each box has a different value for the `z-index` which results in the boxes being layered on top of each other.
You can think of `z-index` as a way to create layers on a webpage, and elements with higher `z-index` values will be placed above those with lower values. This is especially useful for controlling how overlapping elements behave in complex layouts, such as modals, pop-ups, or tooltips.