CssHow-ToBeginner · 3 min read

How to Send Element to Back in CSS: Simple Guide

To send an element to the back in CSS, give it a lower z-index value than other elements and ensure it has a position property set (like relative, absolute, or fixed). Elements with lower z-index appear behind those with higher values.

📐

Syntax

The key CSS properties to control element stacking order are position and z-index.

position: Must be set to relative, absolute, fixed, or sticky for z-index to work.
z-index: A number that sets the stack order. Lower numbers go behind higher numbers.

css

selector {
  position: relative; /* or absolute, fixed, sticky */
  z-index: -1; /* lower value sends element to back */
}

💻

Example

This example shows two overlapping boxes. The blue box has a lower z-index and appears behind the red box.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Send Element to Back Example</title>
<style>
  .box {
    width: 150px;
    height: 150px;
    position: relative;
    top: 50px;
    left: 50px;
  }
  .blue {
    background-color: blue;
    z-index: 0;
  }
  .red {
    background-color: red;
    position: relative;
    top: -100px;
    left: 100px;
    z-index: 1;
  }
</style>
</head>
<body>
  <div class="box blue"></div>
  <div class="box red"></div>
</body>
</html>

Output

A blue square behind a red square overlapping it on the page.

⚠️

Common Pitfalls

Common mistakes include:

Not setting position on the element, so z-index has no effect.
Using negative z-index without understanding it may send the element behind the page background, making it invisible.
Forgetting that stacking context can be affected by parent elements with their own z-index.

css

/* Wrong: z-index ignored because position is static (default) */
.element {
  z-index: -1;
  /* position is missing */
}

/* Right: position set so z-index works */
.element {
  position: relative;
  z-index: -1;
}

📊

Quick Reference

Property	Purpose	Notes
position	Enables z-index to work	Use relative, absolute, fixed, or sticky
z-index	Controls stack order	Lower values go behind higher values
negative z-index	Sends element behind others	Can hide element behind page background
stacking context	Parent elements affect stacking	Check parent z-index and position

✅

Key Takeaways

Set position to relative, absolute, fixed, or sticky for z-index to work.

Use a lower z-index value to send an element behind others.

Negative z-index can hide elements behind the page background.

Parent elements with z-index create stacking contexts affecting child layering.

Always test layering visually to confirm the element is behind as expected.