fixed元素在侧边栏垂直居中必须用right: 20px; top: 50%; transform: translatey(-50%)，因top: 50%仅将上边缘移至视口垂直中线，需transform回拉自身高度一半才能真正居中。
fixed 元素怎么在侧边栏垂直居中？
直接写 position: fixed + top: 50% 不等于居中——它只是把元素**上边缘**拉到视口垂直中线，得再用负 margin 把自己往上拉一半高度才行。
-
top: 50%是让元素顶部对齐视口 50% 位置 - 必须配合
margin-top: -Xpx（X 是元素自身高度的一半）才能视觉居中 - 如果高度不固定（比如内容动态变化），改用
transform: translateY(-50%)更稳妥 - 右侧侧边栏常用组合：
right: 20px; top: 50%; transform: translateY(-50%);
为什么 fixed 广告总被遮住？z-index 不生效的真相
写了 z-index: 9999 还被盖住，大概率不是 z-index 数值不够，而是祖先元素悄悄创建了层叠上下文。
- 触发层叠上下文的属性包括：
transform、opacity、filter、will-change、perspective - 一旦父容器用了这些，
position: fixed元素的z-index就只在那个父容器内部有效 - 检查侧边栏容器是否带
transform: translateX(0)或opacity: 0.99——删掉就能立刻恢复 - 临时验证方法：给父容器加
outline: 1px solid red，看是否意外触发了新层叠上下文
小屏下侧边栏广告溢出怎么办？
fixed 元素不随侧边栏宽度缩放，width: 100% 是错的——它会撑满整个视口，不是侧边栏区域。
- 别依赖父容器宽度，主动设
max-width: 200px或width: 80vw控制上限 - 响应式建议：
@media (max-width: 768px) { .ad-sidebar { width: 60px; right: 5px; } } - 图像用
width: 100%; height: auto;保比例，避免拉伸变形 - 如果侧边栏本身有横向滚动（
overflow-x: auto），fixed 广告天然不随其滚动——但前提是没嵌套在带transform的祖先里
sticky 能替代 fixed 做侧边栏广告吗？
能，但行为完全不同：position: sticky 是“滚动到某位置才吸住”，不是全程固定。
- 适用场景：广告想随内容滚动一段距离后才停在侧边（比如文章页右侧推荐位）
- 必须指定
top或bottom，例如：position: sticky; top: 100px; - 注意兼容性：
sticky在旧版 Safari 和部分 Android WebView 中支持不稳定 - 和
fixed最大区别：sticky 仍属于文档流，会受父容器overflow影响；fixed 完全脱离，不受限
top 和 right 后，发现广告突然卡在左上角——八成是忘了设偏移量，或者父级悄悄加了 transform。这类问题往往要查三层 DOM 才能找到根因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
