Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.

Well done!

You have completed (UPI) Chapter 8: Enhancing Web Design with Cascading Style Sheets (CSS)!

Instruction

How to Use Z-index for Layering

If multiple positioned elements overlap, z-index can control which element appears on top.

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

CSS:

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 5; /* Lower stack order */
}
.box2 {
  position: absolute;
  top: 80...