Z-Index and Layering

When elements overlap, z-index decides which appears on top.

Example:

<style>
.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
  background: lightblue;
  padding: 20px;
}
.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  z-index: 2;
  background: coral;
  padding: 20px;
}
</style>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Practice Task:
Create a modal popup that appears above all other elements.