# 练习 4：定位与徽标

## 目标

理解 `position: relative` 和 `position: absolute` 的配合。

## 你要练什么

- `position: relative`
- `position: absolute`
- `top`
- `right`
- `z-index`

## 任务

请完成一个课程推荐卡片，要求：

- 卡片右上角有一个“热门”徽标
- 徽标固定贴在卡片角上
- 卡片主体仍保持正常排版
- 按钮和标题之间留出合理距离

## 文件

- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/answer.css)