# Containing block

The box an element's percentages and positions are measured from.

## What is a **containing block**?

The **containing block** is the box an element's percentages and positions are measured from, usually its nearest suitable ancestor.

```css
.card { position: relative; }   /* the containing block for... */
.card .badge { position: absolute; top: 0; }   /* ...this badge */
```

Level: Master · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/master)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/containing-block