调整窗口大小时绝对定位文本溢出视口的CSS问题修复

你的元素跑出可视区的核心原因是定位单位用错了：水平方向的left属性你写了208vh，vh是视口高度单位（1vh = 当前视口高度的1%），水平偏移量跟着视口高度走，一旦调整窗口大小、宽高比变化，水平偏移值不会随视口宽度同步缩放，数值过大就会直接跑到可视区域外面。

根据你要把Discord链接放在页面右上角的需求，最稳妥的写法是直接用right属性做右定位，水平偏移改用和视口宽度绑定的vw单位，从根源避免单位混用导致的错位：

.DISCORD {
    position: absolute;
    color: white;
    font-family: 'Poppins-Light';
    text-decoration: none;
    top: 3vh;
    /* 删除错误的left: 208vh，改为右定位，水平单位用视口宽度单位vw */
    right: 3vw;
    font-size: 3vh;
}

对应的HTML代码不需要改动，保持原有结构即可：

<!--DISCORD LINK-->
<a class="DISCORD" target="_blank" href="https://discord.domain.com/">DISCORD</a>

适配注意点 #

• 定位时优先用对应方向的边界属性：放右上角就用top+right，放左上角用top+left，不用自己反向算偏移值，能减少很多计算错误
• 单位不要交叉混用：水平方向（left/right、width）的偏移、尺寸优先用vw、百分比、rem这类和宽度逻辑匹配的单位；垂直方向（top/bottom、height）的偏移、尺寸再用vh单位，避免宽高比变化时错位
• 如果链接是放在某个容器内部，给父容器加上position: relative作为定位上下文，再用百分比做内部偏移，适配稳定性会更高

错位问题效果参考：

• 正常窗口显示效果：
• 调整窗口后错位效果：

内容的提问来源于stack exchange，提问作者LbGame