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: 80px;
left: 80px;
...