Summary - Modal skeleton

CSS course · Beginner · Lesson 77/82

Build a modal skeleton with overflow, z-index and position.

Summary: Modal skeleton

In this group you learned to control overflow, stack elements, and manage the float flow. Now we bring them together into a modal skeleton. A modal is a box that pops over the page: the overlay dims the background, and the box clips and presents the content.

Two pieces are needed: .modal-overlay, a fixed, translucent cover; .modal-box, the content box. The overlay sits over the page with position: fixed and a high z-index; the box clips its content with overflow: hidden.

Exercise Build the modal skeleton

Write two class selectors: .modal-overlay and .modal-box. Add position: fixed and z-index: 100 to the first. Add position: absolute and overflow: hidden to the second. The overlay stays fixed; the box clips its content.

Show example solution

/* modal skeleton */
.modal-overlay {
  position: fixed;
  z-index: 100;
}
.modal-box {
  position: absolute;
  overflow: hidden;
}

Test yourself

Match each property to its modal role

position: fixed

Fixes the overlay
z-index: 100

Brings overlay on top
overflow: hidden

Clips the box content
background-color: rgba

Dims the overlay
Which pair for the modal overlay?
```
/* overlay */
.modal-overlay {
  ?
}
```
- overflow: hidden + position: absolute
- position: fixed + z-index: 100
- float: left + clear: both
- display: none + visibility: hidden
Show answer

position: fixed + z-index: 100 — Correct. position: fixed keeps the overlay fixed on screen; z-index: 100 lifts it to the top.

Lift the box above the overlay

.modal-box {
  position: absolute;
  overflow: hidden;
  ____;
}

Show answer

.modal-box {
  position: absolute;
  overflow: hidden;
  z-index: 101;
}

Summary - Modal skeleton