front-end-example/02-css-layout/04-position-badge

练习 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)