TheOdinProject · Chetan-KK · Oct 11, 2025 · Oct 12, 2025
diff --git a/foundations/positioning/01-absolute-positioning/README.md b/foundations/positioning/01-absolute-positioning/README.md
@@ -0,0 +1,28 @@
+# Absolute Positioning
+
+This exercise will help you understand how to use CSS absolute positioning to place elements exactly where you want them within a container.
+
+You need to position four elements using absolute positioning:
+
+- Red box: top-left corner of the container
+- Blue box: top-right corner of the container
+- Green box: bottom-left corner of the container
+- Overlay: centered in the container, overlapping other elements
+
+## Desired Outcome
+
+![outcome](./desired-outcome.png)
+
+### Self Check
+
+- Are all boxes positioned correctly using absolute positioning?
+- Is the container set as the positioning context (relative positioning)?
+- Does the overlay appear on top of and centered in the container?
+- Are the boxes positioned exactly at the corners as specified?
+
+### Hints
+
+- Remember that absolutely positioned elements are positioned relative to their nearest positioned ancestor
+- The container needs to be the positioning context
+- Use `top`, `right`, `bottom`, and `left` properties to specify exact positions
+- The overlay should be centered both horizontally and vertically
diff --git a/foundations/positioning/01-absolute-positioning/desired-outcome.txt b/foundations/positioning/01-absolute-positioning/desired-outcome.txt
@@ -0,0 +1,8 @@
+This would be an image showing the desired outcome:
+- A grey container with a black border
+- Red box positioned in the top-left corner
+- Blue box positioned in the top-right corner  
+- Green box positioned in the bottom-left corner
+- White overlay with dashed border centered in the container
+
+You can create this image by taking a screenshot of the solution.html file in a browser.
diff --git a/foundations/positioning/01-absolute-positioning/index.html b/foundations/positioning/01-absolute-positioning/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Absolute Positioning</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="box red">Red Box</div>
+      <div class="box blue">Blue Box</div>
+      <div class="box green">Green Box</div>
+      <div class="overlay">Overlay</div>
+    </div>
+  </body>
+</html>
diff --git a/foundations/positioning/01-absolute-positioning/solution/solution.css b/foundations/positioning/01-absolute-positioning/solution/solution.css
@@ -0,0 +1,66 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+
+.container {
+  background-color: #f0f0f0;
+  border: 2px solid #333;
+  width: 400px;
+  height: 300px;
+  margin: 0 auto;
+  /* SOLUTION: Set positioning context */
+  position: relative;
+}
+
+.box {
+  width: 80px;
+  height: 80px;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+}
+
+.red {
+  background-color: #ff6b6b;
+  /* SOLUTION: Position in top-left corner */
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.blue {
+  background-color: #4ecdc4;
+  /* SOLUTION: Position in top-right corner */
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.green {
+  background-color: #45b7d1;
+  /* SOLUTION: Position in bottom-left corner */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.overlay {
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 2px dashed #999;
+  width: 120px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  /* SOLUTION: Center in container using absolute positioning */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/foundations/positioning/01-absolute-positioning/solution/solution.html b/foundations/positioning/01-absolute-positioning/solution/solution.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Absolute Positioning</title>
+    <link rel="stylesheet" href="solution.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="box red">Red Box</div>
+      <div class="box blue">Blue Box</div>
+      <div class="box green">Green Box</div>
+      <div class="overlay">Overlay</div>
+    </div>
+  </body>
+</html>
diff --git a/foundations/positioning/01-absolute-positioning/style.css b/foundations/positioning/01-absolute-positioning/style.css
@@ -0,0 +1,52 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+
+.container {
+  background-color: #f0f0f0;
+  border: 2px solid #333;
+  width: 400px;
+  height: 300px;
+  margin: 0 auto;
+  /* Add position property here */
+}
+
+.box {
+  width: 80px;
+  height: 80px;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+}
+
+.red {
+  background-color: #ff6b6b;
+  /* Position this box in the top-left corner of the container */
+}
+
+.blue {
+  background-color: #4ecdc4;
+  /* Position this box in the top-right corner of the container */
+}
+
+.green {
+  background-color: #45b7d1;
+  /* Position this box in the bottom-left corner of the container */
+}
+
+.overlay {
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 2px dashed #999;
+  width: 120px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  /* Position this element in the center of the container, overlapping other elements */
+}
diff --git a/foundations/positioning/02-layering/README.md b/foundations/positioning/02-layering/README.md
@@ -0,0 +1,31 @@
+# Layering with Z-Index
+
+This exercise teaches you how to control the layering of absolutely positioned elements using the `z-index` property.
+
+You need to position four overlapping elements and control their stacking order:
+
+- Background layer: positioned behind all others
+- Middle layer: positioned above background but below foreground
+- Foreground layer: positioned above middle but below top
+- Top layer: positioned on top of all others
+
+The layers should overlap in a cascading pattern from top-left to bottom-right.
+
+## Desired Outcome
+
+![outcome](./desired-outcome.png)
+
+### Self Check
+
+- Are all elements absolutely positioned within the container?
+- Do the elements overlap in the correct stacking order?
+- Is the container set as the positioning context?
+- Are the z-index values used correctly to control layering?
+
+### Hints
+
+- Use `position: relative` on the container to establish positioning context
+- Use `position: absolute` on all layer elements
+- Use `z-index` to control which elements appear on top
+- Higher z-index values appear above lower ones
+- Elements positioned later in the HTML appear above earlier ones by default
diff --git a/foundations/positioning/02-layering/desired-outcome.txt b/foundations/positioning/02-layering/desired-outcome.txt
@@ -0,0 +1,10 @@
+This would be an image showing the desired outcome:
+- A grey container with a black border
+- Four colored squares overlapping in a diagonal cascade pattern
+- Background layer (red) at top-left
+- Middle layer (teal) overlapping background
+- Foreground layer (blue) overlapping middle
+- Top layer (green) overlapping foreground
+- Each layer properly stacked using z-index
+
+You can create this image by taking a screenshot of the solution.html file in a browser.
diff --git a/foundations/positioning/02-layering/index.html b/foundations/positioning/02-layering/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Layering with Z-Index</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="layer background">Background Layer</div>
+      <div class="layer middle">Middle Layer</div>
+      <div class="layer foreground">Foreground Layer</div>
+      <div class="layer top">Top Layer</div>
+    </div>
+  </body>
+</html>
diff --git a/foundations/positioning/02-layering/solution/solution.css b/foundations/positioning/02-layering/solution/solution.css
@@ -0,0 +1,61 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+
+.container {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  border: 2px solid #333;
+  background-color: #f9f9f9;
+  /* SOLUTION: Set positioning context */
+  position: relative;
+}
+
+.layer {
+  width: 120px;
+  height: 120px;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  /* SOLUTION: All layers absolutely positioned */
+  position: absolute;
+}
+
+.background {
+  background-color: #ff6b6b;
+  /* SOLUTION: Background layer - lowest z-index */
+  top: 20px;
+  left: 20px;
+  z-index: 1;
+}
+
+.middle {
+  background-color: #4ecdc4;
+  /* SOLUTION: Middle layer */
+  top: 60px;
+  left: 60px;
+  z-index: 2;
+}
+
+.foreground {
+  background-color: #45b7d1;
+  /* SOLUTION: Foreground layer */
+  top: 100px;
+  left: 100px;
+  z-index: 3;
+}
+
+.top {
+  background-color: #96ceb4;
+  /* SOLUTION: Top layer - highest z-index */
+  top: 140px;
+  left: 140px;
+  z-index: 4;
+}
diff --git a/foundations/positioning/02-layering/solution/solution.html b/foundations/positioning/02-layering/solution/solution.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Layering with Z-Index</title>
+    <link rel="stylesheet" href="solution.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="layer background">Background Layer</div>
+      <div class="layer middle">Middle Layer</div>
+      <div class="layer foreground">Foreground Layer</div>
+      <div class="layer top">Top Layer</div>
+    </div>
+  </body>
+</html>
diff --git a/foundations/positioning/02-layering/style.css b/foundations/positioning/02-layering/style.css
@@ -0,0 +1,51 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+
+.container {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  border: 2px solid #333;
+  background-color: #f9f9f9;
+  /* Add position property here */
+}
+
+.layer {
+  width: 120px;
+  height: 120px;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  /* All layers should be absolutely positioned */
+}
+
+.background {
+  background-color: #ff6b6b;
+  /* Position this layer behind all others */
+  /* Position at: top: 20px, left: 20px */
+}
+
+.middle {
+  background-color: #4ecdc4;
+  /* Position this layer in the middle */
+  /* Position at: top: 60px, left: 60px */
+}
+
+.foreground {
+  background-color: #45b7d1;
+  /* Position this layer above middle but below top */
+  /* Position at: top: 100px, left: 100px */
+}
+
+.top {
+  background-color: #96ceb4;
+  /* Position this layer on top of all others */
+  /* Position at: top: 140px, left: 140px */
+}