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