diff --git a/curriculum/challenges/english/blocks/review-css-positioning/671a967424a00e8c6561b182.md b/curriculum/challenges/english/blocks/review-css-positioning/671a967424a00e8c6561b182.md
index 6fb732b9104..802d07ddfed 100644
--- a/curriculum/challenges/english/blocks/review-css-positioning/671a967424a00e8c6561b182.md
+++ b/curriculum/challenges/english/blocks/review-css-positioning/671a967424a00e8c6561b182.md
@@ -5,7 +5,7 @@ challengeType: 31
dashedName: review-css-positioning
---
-# --description--
+# --interactive--
## Working With Floats
@@ -18,7 +18,35 @@ float: right;
- **Clearing Floats**: The `clear` property is used to determine if an element needs to be moved below the floated content. When you have multiple floated elements stacked next to each other, there could be issues with overlap and collapsing in the layouts. So a `clearfix` hack was created to fix this issue.
+:::interactive_editor
+
+```html
+
+
+
Left
+
Right
+
+```
+
```css
+.box {
+ width: 100px;
+ height: 60px;
+ color: white;
+ text-align: center;
+ line-height: 60px;
+}
+
+.left {
+ float: left;
+ background: teal;
+}
+
+.right {
+ float: right;
+ background: purple;
+}
+
.clearfix::after {
content: "";
display: block;
@@ -26,11 +54,20 @@ float: right;
}
```
+:::
+
## Static, Relative and Absolute Positioning
- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another.
- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
+:::interactive_editor
+
+```html
+
+
Relative Element
+```
+
```css
.relative {
position: relative;
@@ -39,9 +76,27 @@ float: right;
}
```
+:::
+
- **Absolute Positioning**: This allows you to take an element out of the normal document flow, making it behave independently from other elements.
+:::interactive_editor
+
+```html
+
+
+ Parent
+
Absolute
+
+```
+
```css
+.parent {
+ position: relative;
+ height: 120px;
+ background: #eee;
+}
+
.positioned {
position: absolute;
top: 30px;
@@ -50,32 +105,71 @@ float: right;
}
```
+:::
+
## Fixed and Sticky Positioning
- **Fixed Positioning**: When an element is positioned with `position: fixed`, it is removed from the normal document flow and placed relative to the viewport, meaning it stays in the same position even when the user scrolls. This is often used for elements like headers or navigation bars that need to remain visible at all times.
+:::interactive_editor
+
+```html
+
+
Fixed Navbar
+
+```
+
```css
.navbar {
position: fixed;
top: 0;
- width: 100%;
+ width: 100%;
+ background: #0077ff;
+ color: white;
+ padding: 8px;
}
```
+:::
+
- **Sticky Positioning**: This type of positioning will act as a hybrid between relative and fixed positioning. Initially, the element behaves as though it's positioned relatively, staying within the flow of the document. However, once the user scrolls the element past a certain point, it "sticks" to the viewport (usually the top) and behaves as though it is fixed. This is great for creating elements like sticky navigation bars, which only become fixed once the user scrolls to a certain position.
+:::interactive_editor
+
+```html
+
+
Scroll down
+
Sticky Element
+
+```
+
```css
.positioned {
position: sticky;
top: 30px;
left: 30px;
+ background: #4caf50;
+ color: white;
+ padding: 6px;
}
```
+:::
+
## Working With the `z-index` Property
- **Definition**: The `z-index` property in CSS is used to control the vertical stacking order of positioned elements that overlap on the page.
+:::interactive_editor
+
+```html
+
+