本文详解初学者常见问题：使用 `position: relative` 错误叠加元素后，底层链接被上层内容遮挡而无法点击；通过语义化结构与 flexbox 布局替代手动偏移，彻底解决交互失效问题。
在你提供的 HTML 代码中，超链接（ 标签）看似存在、样式正常，却无法点击——根本原因并非 HTML 写法错误，而是 CSS 定位导致的层叠（z-index）遮挡。
? 问题定位：position: relative 引发的视觉欺骗
你多次使用类似以下结构：
...
同时，上方的
Websites I use
也通过 top:2px 向下微调。这种“凭感觉调像素”的方式，实际造成了两个严重后果：- ✅ 视觉上内容似乎对齐了；
- ❌ 但
元素仍保留在文档流中原始位置（或其计算后的层叠上下文），物理上覆盖在下方
- 的顶部区域
- ? 浏览器事件模型中，鼠标点击会优先触发最上层可交互元素（此处是
或其父容器），导致 标签完全收不到点击事件。
? 小知识：position: relative 不改变元素在文档流中的占位，仅做视觉偏移；若未设置 z-index，后出现的元素默认层叠在前一个之上。
✅ 正确解法：用 Flexbox 实现响应式并排布局
替代“手调 top/left”的过时方式，应采用现代 CSS 布局方案——Flexbox。它天然支持水平/垂直对齐、空间分配与顺序控制，且完全基于文档流，无遮挡风险。
立即学习“前端免费学习笔记（深入）”；
以下是关键重构步骤：
1. 移除所有 position: relative + top/left/right 组合
这些是问题根源，全部删除，让元素回归自然流。
2. 使用 display: flex 统一控制布局
- 标题区：
并排 → 父容器设 display: flex; justify-content: space-between;
- 列表区：左右两栏 → 外层 display: flex; justify-content: space-between;，内部分别包裹
3. 修正 HTML 结构语义
原代码将
直接写在
- 内部，违反 HTML 规范（
- 作为直接子元素）。应将描述文字移至
- 内部，确保结构合法、可访问性良好：
-
Code.org
Before I came to this school... for HTML coding.
4. 完整推荐代码（精简优化版）
Cool Page Websites I Use and Used To Use
Websites I use
Websites I don't use
-
Code.org
Before I came to this school I knew about this website but I had
only used it once, now I use it almost everyday for HTML coding. -
Sora
I use Sora to read books almost everyday.
-
GitHub
I explore open-source projects and learn from real-world code.
-
Facebook
I avoid it due to privacy concerns and time consumption.
-
X (Twitter)
I find the platform too noisy and prefer focused learning resources.
-
TikTok
I don’t use it — I prioritize deep reading and coding over short-form video.
⚠️ 注意事项 & 最佳实践
- 永远避免“像素级微调”布局：top/left 是调试手段，不是布局方案；
- 验证 HTML 结构合法性：使用 W3C Validator 检查嵌套是否合规；
- 链接需有明确可点击区域：添加 display: block 或 inline-block 可扩大热区；
-
语义化优先：用
、 等标签替代无意义 ，提升可访问性；- 学习资源推荐：MDN Flexbox 指南（中文版）图文并茂，适合入门。
掌握 Flexbox 不仅能解决当前问题，更是构建健壮、响应式网页的基础能力。从今天起，告别 position: relative 布局陷阱，拥抱现代 CSS！
-
Code.org
- 只允许
