右下角悬浮框这东西，右下看起来简单，角悬写起来坑不少。浮框我见过太多人直接一个 position: fixed; bottom: 0; right: 0; 就完事，代码结果在手机上被浏览器地址栏挡掉一半，右下或者跟页面里其他 fixed 元素叠在一起打架。角悬下面这份代码是浮框我自己项目里用了两年多的版本，改过七八次，代码目前没出过大问题。右下

先看结构。角悬悬浮框本质上就是浮框一个固定定位的容器，里面塞内容。代码但别急着写 CSS，右下HTML 骨架得先想清楚：

<div class="float-box" id="floatBox"> <div class="float-header"> <span>快捷入口</span> <button class="float-close" id="floatClose">×</button> </div> <div class="float-body"> <a href="#">在线客服</a> <a href="#">回到顶部</a> <a href="#">意见反馈</a> </div> </div> 

这里有个细节：关闭按钮我用了 <button> 而不是角悬 <div>，因为 button 自带键盘可访问性，浮框Tab 能聚焦，回车能触发。很多人图省事用 div 加 onclick，键盘用户直接抓瞎。

CSS 部分才是重头戏。我习惯用 right: 20px; bottom: 20px; 而不是贴边 0，留出呼吸空间，视觉上不压抑。但光这样不够，移动端 Safari 的底部工具栏会盖住内容，所以加了一层 env(safe-area-inset-bottom)：

.float-box {  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 160px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 9999; font-size: 14px; transition: transform 0.3s ease, opacity 0.3s ease; } .float-box.hidden {  transform: translateY(120%); opacity: 0; pointer-events: none; } 

z-index: 9999 是我踩坑后的妥协。之前用 100，结果被页面里某个轮播图的 999 压住了。干脆拉满，反正悬浮框就该在最上层。隐藏状态用 translateY 而不是 display: none，因为要保留过渡动画，直接 none 会闪一下。

JavaScript 控制显隐很简单，但别用 style.display 来回切。我用 class 切换：

const box = document.getElementById('floatBox'); const closeBtn = document.getElementById('floatClose'); closeBtn.addEventListener('click', () => {  box.classList.add('hidden'); sessionStorage.setItem('floatBoxClosed', '1'); }); if (sessionStorage.getItem('floatBoxClosed') === '1') {  box.classList.add('hidden'); } 

用 sessionStorage 而不是 localStorage，因为用户关掉后，下次打开新标签页应该重新出现。如果永久记住，这功能就废了。这个判断我纠结过，后来问了几个人，多数觉得“关一次就永远消失”太粗暴。

还有一个隐藏问题：页面滚动时，悬浮框如果带“回到顶部”按钮，得监听滚动事件。但别直接绑 scroll，用 passive: true 避免卡顿：

window.addEventListener('scroll', () => {  // 逻辑 }, {  passive: true }); 

我见过有人把悬浮框做成可拖拽的，代码量直接翻三倍，还要处理触摸事件和边界判断。除非产品经理拿刀架脖子，否则别碰。固定右下角已经够用了，用户习惯那个位置。

最后说个真实案例。去年帮朋友改一个后台系统，他的悬浮框在 Chrome 上正常，在 Firefox 里偏了 10px。查了半天，发现是 bottom 用了百分比，而 Firefox 对 fixed 元素的百分比计算基准跟 Chrome 不一样。改成像素值立刻好了。所以别炫技，老老实实写 bottom: 20px。

代码贴完了，拿去直接用。改宽度和颜色随意，但定位和 z-index 别乱动。