通过伪元素 body::before 配合 position: fixed 和 pointer-events: none，可轻松创建不干扰交互、随页面滚动始终贴边显示的全局边框。
通过伪元素 `body::before` 配合 `position: fixed` 和 `pointer-events: none`，可轻松创建不干扰交互、随页面滚动始终贴边显示的全局边框。
实现“粘性边框”（Sticky Border）的关键在于：边框需固定在视口边缘、不随内容滚动而移位，同时不能遮挡或阻断下方可点击元素（如导航链接）。传统方案中使用额外 <div> 并设 <code>position: sticky 容易引发层叠（z-index）冲突，导致点击失效——正如提问者所遇问题。
更简洁、健壮的解法是利用 CSS 伪元素 + 固定定位：
✅ 优势显著：
- 无需额外 HTML 结构，语义干净；
-
position: fixed确保边框始终锚定视口四边； -
pointer-events: none使伪元素完全透明于鼠标事件，底层内容（如<nav></nav>、按钮）可正常响应； - 使用 CSS 自定义属性（
--border-w）便于统一维护边框宽度。
以下是完整可运行的实现代码：
立即学习“前端免费学习笔记（深入）”；
* {
margin: 0;
padding: 0;
min-width: 0;
min-height: 0;
box-sizing: border-box;
}
::before, ::after {
box-sizing: inherit;
}
:root {
--border-w: 15px; /* 统一边框宽度，便于后续调整 */
}
body {
min-height: 100vh; /* 推荐用 min-height 而非 height，兼容内容高度变化 */
background-color: lightgray;
overflow-y: auto;
}
/* 核心：固定定位的伪边框 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* 覆盖整个视口高度 */
border: var(--border-w) solid gray;
pointer-events: none; /* 关键！确保不拦截鼠标事件 */
z-index: -1; /* 可选：显式置于底层，增强安全性 */
}
/* 内容区域预留边框空间，避免被遮挡 */
.content {
padding: var(--border-w); /* 上右下左均留出边框宽度 */
/* 若内容需撑满高度，可添加：min-height: calc(100vh - 2 * var(--border-w)); */
}HTML 结构保持极简，仅需一个 .content 容器：
<div class="content">
<header>
<a href="/">
<img id="logo" src="img/Cropped_Image.png" alt="logo">
</a>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- 其他页面内容 -->
</div>⚠️ 注意事项：
- 不要对
body::before设置z-index: 0或正值，否则可能意外覆盖内容；推荐设为-1或依赖默认层叠顺序； - 若页面有横向滚动需求，建议将
body::before的width改为100vw，并补充right: 0以确保右侧边框始终对齐； -
padding应用在.content上而非body，既保证内容内边距一致，又避免影响全局布局流。
该方案已在现代浏览器（Chrome/Firefox/Safari/Edge）中稳定运行，是实现视觉边框与功能可用性兼顾的最佳实践。
