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)

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
+<link rel="stylesheet" href="styles.css">
+<div class="container">
+  <div class="box1">Box 1</div>
+  <div class="box2">Box 2</div>
+  <div class="box3">Box 3</div>
+</div>
+```
+
 ```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.