CSS 定位：通知徽章

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/4

Unlocked Steps1/4

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 设置相对定位
将图标容器设置为 position: relative，作为徽章定位的参照点。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Write the minimum runnable version first, then iterate based on validation hints.

2) Beginner Explanation (Current Step)

Step task: 将图标容器设置为 position: relative，作为徽章定位的参照点。

3) Starter Template (Type along)

// Write the minimum runnable version first, then complete the logic

4) Rule Validation & Hints

📋 当前任务 - Step 1

设置 relative
设置 inline-block

💡 步骤提示

🔐 学习提示

📖 快速参考

**绝对定位居中：**

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

**水平居中：**

.h-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

**全屏覆盖：**

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 或者 inset: 0; */
}

About This Exercise

在这个实验中，你将学习 CSS 定位，这是创建复杂布局的关键技能。

CSS position 属性可以让你精确控制元素在页面上的位置，脱离正常的文档流。

你将学到：

理解 position: relative 和 absolute 的配合使用
使用 top, right, bottom, left 精确定位元素
理解 z-index 控制堆叠顺序
创建常见的徽章和弹出层效果

Intermediate⏱ 15-20 min

Learning Objectives

理解四种定位方式的区别
掌握 relative + absolute 的父子定位技巧
学会使用 transform 进行精确居中
理解 z-index 堆叠上下文

Scenario

你正在为一个应用创建导航栏图标。设计要求： - 图标右上角显示红色通知徽章 - 徽章显示未读消息数量 - 徽章需要固定在图标的右上角 - 当数字超过 99 时显示 99+

Why Do This

CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
Clarify the box model and layout rules first, then add visual polish — less rework that way.
Writing styles as reusable patterns is more valuable than tweaking a single page.

Hands-on Practice

Write the layout skeleton first (display/gap/align), then add colors and shadows.
Extract repeated styles into reusable classes.
Use validation rules to reverse-engineer the design intent of your current styles.

Common Mistakes

Adding margin after margin to fix positioning while ignoring layout containers.
Selectors nested too deep, causing style coupling.
Only caring about how it looks without considering maintainability.

Deliverable

A reusable component style template (layout rules + visual rules + naming conventions).

My Progress

Completed Steps0 / 4

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passDesktop and mobile views both look correctStyle naming is clear and structure is maintainable

Reflection Questions (Recommended)

What was your main layout decision? Why did you choose it?

What change did you make specifically for maintainability?

What would you prioritize improving next time?

Structure and semanticsLayout and responsivenessNaming and reusability