用 position: fixed 实现右侧广告固定需同时设置 right（或 left）、top/bottom 和足够高的 z-index 三要素，缺一不可；常见错误是漏定位值或 z-index 导致错位或被遮盖。
用 position: fixed 实现右侧广告固定，但必须配齐三要素
只写 position: fixed 不会生效——它只是脱离文档流的第一步。真正让广告“粘”在右下角或右侧，还得同时设置 right（或 left）、top/bottom 和足够高的 z-index。
常见错误是漏掉 right: 20px 这类定位值，结果广告堆在视口左上角；或者没设 z-index: 9999，被导航栏、轮播图盖住。
-
right: 20px; bottom: 80px;是右侧悬浮广告最稳妥的起始定位（避开 iOS 底部手势区） -
width: 280px;建议设明确宽度，避免内容撑开导致布局抖动 -
max-width: 85vw;防止小屏下溢出，比百分比更可靠 - 必须加
box-sizing: border-box;，否则 padding/border 会额外增加宽度
为什么 position: sticky 不适合侧边广告？
position: sticky 看似省事，但它依赖父容器滚动，且只在“滚动到临界点”时才吸附——这和广告需要“始终可见”的需求冲突。实际测试中，只要父容器有 overflow: hidden 或 transform，sticky 就直接失效；Safari 移动端对 sticky 的支持也极不稳定。
更关键的是：sticky 不脱离文档流，会参与宽度计算，容易把主内容区域挤窄，甚至触发横向滚动条。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 广告类元素本质是“覆盖层”，不是页面结构的一部分 → 必须用
fixed - 若强行用 sticky，需手动监听
scroll+resize动态改top，代码量翻倍且兼容性差 - IE 完全不支持 sticky，而 fixed 兼容所有浏览器（包括 IE8+）
移动端滚动时广告卡顿、跳动、消失？检查这三个地方
现象是：iOS 上滑动页面，广告突然“卡住”不动，或快速滚动时短暂消失，松手后才出现。根本原因不是 JS 性能问题，而是 CSS 层级和渲染行为被干扰。
- 确保广告容器没有
overflow-x: hidden（尤其父级），否则 Safari 会强制重绘导致跳帧 - 加
touch-action: pan-y;，阻止用户在广告内上下滑动时触发页面整体滚动 - 避免在广告内部用
transform: scale()或filter: blur()，这些会触发合成层切换，引发闪烁 - 不要用
will-change: transform过度优化，现代浏览器已自动处理，反而增加内存压力
广告收起/展开时如何避免页面重排（reflow）？
直接改 display: none 或 width: 0 会强制浏览器重排，导致主内容区域“抽搐”。正确做法是用 transform 移出视口，配合 overflow: hidden 控制裁剪。
- 收起状态：
transform: translateX(100%); opacity: 0;+pointer-events: none; - 展开状态：
transform: translateX(0); opacity: 1;+pointer-events: auto; - 必须加
transition: transform 0.3s ease, opacity 0.3s ease;，别只写一个属性 - 禁止在动画过程中动态修改
height或margin，这些会触发布局计算
真正难的不是让广告“固定”，而是让它在各种设备、各种缩放、各种滚动速度下都不抖、不遮、不卡。很多问题出在“以为设了 fixed 就万事大吉”，却忽略了视口单位、触摸行为、合成层和重排链这些底层细节。
