Q146- What is the z-index property in CSS and how does it work?

The z-index property in CSS controls the stacking order of elements along the z-axis (depth).

• Higher z-index → element appears on top of elements with lower z-index.
• Only works on positioned elements (position: relative, absolute, fixed, or sticky).
• Default z-index is auto (0 in stacking context).

---

🔹 Basic Example

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 80px;
  left: 80px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2; /* appears on top */
}

✅ Behavior: The blue box will overlap the red box because its z-index is higher.

---

🔹 Important Points

1. Positioning required: z-index has no effect on position: static.
2. Stacking context: Certain properties (like opacity < 1, transform) create a new stacking context, which can affect how z-index works.
3. Negative values: Allowed. Elements with negative z-index can appear behind the parent.

---

💡 In Short:

z-index controls which element appears on top when elements overlap, but only works for positioned elements within the same stacking context.