HTML底部固定悬浮条怎么嵌入问卷调查入口-html教程-PHP中文网

底部固定悬浮条必须用position: fixed，配合bottom: 0、z-index≥100、max-width: 320px+width: 100%、overflow: visible，并通过html宏开启及权限配置实现兼容confluence与移动端。

html底部固定悬浮条怎么嵌入问卷调查入口

底部固定悬浮条的 CSS 定位必须用 `position: fixed`

不加 fixed 就没法真正“悬浮”——absolute 会随滚动消失，sticky 在多数 Confluence 版本里不兼容 toc 宏结构。底部固定需明确指定 bottom: 0 和 left/right 值，否则可能错位或被遮挡。

z-index 至少设为 100，否则会被 Confluence 默认的页脚、编辑栏盖住
宽度建议用 max-width: 320px（适配手机）+ width: 100%（桌面自适应），避免在小屏上横向溢出
如果悬浮条文字被截断，大概率是父容器设置了 overflow: hidden，需在样式中加 overflow: visible

问卷链接要嵌进悬浮条，得用 `@#@#@#@#@#@#@#@#@#@0` 最稳。

务必用完整 HTTPS 链接，Confluence 会拦截 HTTP 资源（显示为“不安全内容”）

加 `target="_blank"` 是必要的，否则点击后会在当前页跳走，用户无法继续浏览原文

如果问卷平台支持 UTM 参数（如 `?utm_source=confluence&utm_medium=fixedbar`），建议加上，方便后续归因分析

Confluence 里 HTML 宏必须先开启，否则根本看不到入口

很多团队开了 Confluence 但没开 HTML 宏权限，结果粘了代码也没反应——不是你写错了，是系统压根不执行。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

路径是：设置 → 管理应用（系统）→ 找到 HTML Include Macro → 点击右侧「模组」→ 开启所有子模块
仅开启宏本身不够，还需检查空间权限：空间管理员需在「空间工具 → 权限」中给对应用户组勾选「可使用 HTML 宏」
开启后，编辑页面时「添加宏」→ 搜索 html，应能见到「HTML」宏（图标是 >），不是「HTML Include」

移动端适配容易被忽略：悬浮条在手机上可能挡住内容或操作失灵

Confluence 移动端渲染逻辑和桌面不同，fixed 元素常被 viewport 缩放或 touch 事件劫持干扰。

加媒体查询：@media (max-width: 768px) { #survey-bar { bottom: 0; right: auto; left: 50%; transform: translateX(-50%); width: 90%; } }
避免用 onclick 绑定 toggle 动作，手机端 click 有 300ms 延迟，改用 ontouchstart 或直接跳转更可靠
测试时别只看浏览器缩放，真机访问 your-site.confluence.net/xxx 才算数——微信内置浏览器对 fixed 支持尤其差

Confluence 不会自动帮你处理 DOM 生命周期，比如 toc 宏加载晚于 HTML 宏时，脚本取不到元素；悬浮条一旦写死尺寸，后续页面结构调整就全乱。留一格空白高度、用百分比替代 px、所有交互走链接而非 JS，才是长期可用的底线。