场景：让元素滚动吸顶
常见的吸顶需求有两种：
- 页头吸顶：Header 本来就在页面顶部，滚动时希望它始终固定在浏览器顶部边缘。
- 中部元素吸顶：某个区块在页面中部（比如侧边栏、工具条、价格表），用户往下滚动到它时，希望它贴在顶部不再滚走。
两种场景用同一条 CSS 规则就能解决：position: sticky。本文来自 BricksLabs 免费教程，纯样式设置，不写一行 JS。
三个关键设置
在 Bricks 编辑器中选中要做吸顶的元素，进入 STYLE → Position 面板：
- Position 选择
sticky - Top 填
var(--wp-admin--admin-bar--height,0)——这个 CSS 变量是 WordPress 提供的：前台有管理员工具栏（admin bar）时等于工具栏高度，没有时回退为0。用它做吸顶偏移，元素贴顶时自动避让管理员栏，不会出现被工具栏盖住的尴尬。 - Z-index 设为
2（或更高）——保证吸顶后盖在普通内容之上。
此外建议给元素加一个背景色。sticky 元素吸顶后是浮在其他内容上面的，如果背景透明，下面滚动上来的文字会穿透显示，观感很差。
完整 CSS 参考
把下面的声明加到目标元素的自定义 CSS（STYLE → CSS → 自定义 CSS 输入框）即可，效果等价于上面的面板设置：
position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 2;
background-color: #ffffff;原理说明
- sticky 与 fixed 的区别：
fixed让元素立即脱离文档流、永远相对视口定位；sticky则是「先正常参与布局，滚动到指定偏移量时被钉住」。这意味着 sticky 元素不会像 fixed 那样一开始就飘起来，也不会挤压后续内容，更符合「滚动到它时再吸顶」的直觉。 - sticky 的生效前提：它只能在父容器范围内吸顶——元素滚动到父容器底部时会跟着父容器一起滚走。所以想让一个元素在整个页面内都吸住，父容器必须是足够高的主体容器，而不是一个矮小的 Div。
var(--wp-admin--admin-bar--height,0)：WordPress 5.x 起通过wp_add_inline_style输出该变量，值为管理员栏高度或0。直接引用它，吸顶偏移自动适配「登录状态有工具栏、未登录没有」两种情形，无需写媒体查询。- z-index：sticky 属于定位元素，会创建新的层叠上下文；不设 z-index 时可能被后面的内容盖住，给个
2保证置顶。
常见坑：sticky 不生效
如果设置了 sticky 却毫无反应，优先排查三点：
- 父容器有
overflow: hidden/overflow: auto：sticky 的定位上下文是最近的可滚动祖先，父容器一旦设了 overflow 裁剪，sticky 元素会跟着被裁剪、完全失效。Bricks 的某些 Section/Container 默认样式或自定义 CSS 里可能带了 overflow，检查 STYLE → Overflow 面板。 - 父容器高度不够：sticky 只能在自己父容器的范围内吸顶，容器到页面底部就结束，元素也跟着结束。想让元素全程吸住，直接父级必须是包裹全页内容的主体容器。
- 没设
top值：只设position: sticky不设top，元素永远不会触发吸顶，因为没有任何偏移阈值。
小结
吸顶 = position: sticky + top 偏移 + z-index + 背景色，四件事，纯 CSS，零 JS、零插件。Bricks 的 Position 面板直接支持 sticky，配合 WP 官方 CSS 变量还能免费获得管理员栏避让能力。记住三个坑：父容器 overflow 会废掉 sticky、容器太矮吸不住、漏设 top 不触发。