How to Move Elements on Top of Each Other with CSS

Stacking elements — like overlaying text on an image, creating a modal popup, or building a layered UI — is a common task in web design. With CSS, you can easily move elements on top of each other using properties like position, z-index, and layout techniques.

In this guide, you’ll learn how to overlay elements in CSS the right way, with practical examples and tips for achieving pixel-perfect layering.

Table of Contents

✅ Core Technique: Use `position` and `z-index`

To place one element over another:

Set the container to position: relative;
Set the overlaying element to position: absolute;
Use top, left, etc. to position it
Use z-index to control the stack order

🧪 Example: Overlay Text on Image

✅ HTML:

<div class="container">
  <img src="image.jpg" alt="Background Image" class="background-img" />
  <div class="overlay-text">Hello World</div>
</div>

✅ CSS:

.container {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.background-img {
  width: 100%;
  display: block;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 6px;
}

✔️ This will perfectly center the text over the image.

🔀 Using `z-index` to Control Layer Order

z-index controls which elements appear on top.
Higher z-index = closer to the user (on top).
Only works on positioned elements (relative, absolute, fixed, sticky).

.element1 {
  position: absolute;
  z-index: 1;
}

.element2 {
  position: absolute;
  z-index: 2; /* On top of .element1 */
}

📦 Example: Stacking Multiple Boxes

<div class="stack-container">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

.stack-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  top: 0;
  left: 0;
  z-index: 1;
}

.green {
  background: green;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.blue {
  background: blue;
  top: 40px;
  left: 40px;
  z-index: 3;
}

✔️ This will layer the boxes diagonally, with blue on top.

🛠 Pro Tip: Overlay with Semi-Transparent Background

To add a dark overlay on top of an image or video:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

❌ Common Mistakes to Avoid

Mistake	Why It’s a Problem
Using `z-index` without `position`	Doesn’t work — element won’t be stacked
Forgetting container is `static`	Positioned elements must be inside `relative` parent
Overlapping without transparency	Backgrounds may cover content underneath

🔚 Conclusion

Using CSS position and z-index, you can easily move elements on top of each other and create powerful, layered designs. Whether it’s overlaying text, creating popups, or crafting UI layers, these techniques are essential for modern web development.

📌 Quick Summary

Task	CSS Required
Stack elements	`position: absolute;`, `z-index:`
Set container boundary	`position: relative;`
Center overlay	`top: 50%; left: 50%; transform: translate(...)`

✅ Core Technique: Use position and z-index