滚动条滑块无法用 position 定位，伪元素不参与文档流，top/left/transform 均无效；仅 width/height、border-radius（≤半宽高）、background 可控；跨浏览器精确定位必须 JS 模拟。
滚动条滑块不能用 position 定位
直接给 ::-webkit-scrollbar-thumb 设置 position: absolute 或 fixed 无效——伪元素不参与文档流，position、top、left 等属性会被浏览器忽略。所有试图“移动滑块位置”的尝试，比如想把它拉到左边、居中、或脱离默认轨道，都会失败。
真正可控的定位维度只有 width / height 和 border-radius
滑块在轨道内的相对位置（即滚动进度）由浏览器自动计算并渲染，开发者无法手动设置其 top 或 transform: translateY()。你能干预的仅是它的尺寸与形状：
-
width（垂直滚动条）或height（水平滚动条）决定滑块粗细 -
border-radius必须 ≤ 滑块宽高的一半，否则被裁切或视觉错位（例如width: 6px; border-radius: 4px就会失效） -
background是刚需，不写就是透明，拖不动也看不见 - 滑块始终居中填充轨道剩余空间，无法偏移对齐（如右对齐、底对齐）
想实现“悬浮”“右贴边”“非默认位置”，必须换思路
当设计要求滚动条脱离原生位置（比如固定在视口右侧、避开侧边栏、或和内容区不对齐），::-webkit-scrollbar 体系已到极限。此时唯一可靠路径是：
- 用真实
<div> 模拟滚动条，放在 <code>下，position: fixed定位 - 监听目标容器的
scroll事件，用scrollTop / scrollHeight动态算出滑块top和height - 给该
<div> 的滑块部分设 <code>pointer-events: auto，其余区域设pointer-events: none，避免遮挡原内容 - 注意
z-index：必须高于弹窗、导航栏等浮动元素，否则点不中
Firefox 和 Safari 的定位限制更硬
Firefox 根本不支持任何伪元素定位，scrollbar-width 只接受 auto/thin/none，没有像素级控制；Safari 直到 16.4+ 才支持基础 ::-webkit-scrollbar，且 :hover、transition、border-radius 在多数版本中仍不可靠。想在这些浏览器里“精确控制位置”，JS 模拟是事实标准，不是备选方案。
立即学习“前端免费学习笔记（深入）”；
