CSS问题：absolute定位元素覆盖滚动条如何解决？

针对你在Xubuntu Firefox中遇到的absolute定位标题覆盖滚动条的问题，以下是几个直接可行的解决思路：

1. 动态计算滚动条宽度，调整元素尺寸 #

由于Firefox中absolute元素的100%宽度会包含滚动条占用的空间，导致覆盖，你可以先计算滚动条的实际宽度，再通过CSS变量动态调整元素尺寸：

步骤1：计算滚动条宽度（JS） #

function getScrollbarWidth() {
  const testEl = document.createElement('div');
  testEl.style.cssText = 'width:100px;height:100px;overflow:scroll;visibility:hidden;position:absolute;';
  document.body.appendChild(testEl);
  const width = testEl.offsetWidth - testEl.clientWidth;
  document.body.removeChild(testEl);
  return width;
}

// 初始化时将滚动条宽度存入CSS变量
document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);

步骤2：调整absolute元素的CSS #

.your-title-class {
  position: absolute;
  top: 0;
  left: 0;
  /* 用calc减去滚动条宽度，避免覆盖 */
  width: calc(100% - var(--scrollbar-width));
  /* 或者直接设置right值，让元素右边缘对齐滚动条左侧 */
  /* right: var(--scrollbar-width); */
  box-sizing: border-box;
  background: #fff; /* 确保标题背景覆盖下方内容 */
}

2. 利用Firefox专属CSS属性统一滚动条样式 #

Firefox支持scrollbar-width属性，可以先统一滚动条宽度，再直接设置固定边距：

/* 给滚动容器（比如body）设置统一滚动条宽度 */
body {
  scrollbar-width: thin; /* 可选值：auto/thin/none */
}

.your-title-class {
  position: absolute;
  top: 0;
  left: 0;
  /* thin模式下滚动条宽度约8px，直接设置right值 */
  right: 8px;
  width: auto; /* 自动填充left到right的区域 */
}

3. 调整滚动容器与标题的层级关系 #

如果滚动条属于某个父容器而非body，可以给父容器设置position: relative; z-index: 1;，同时给标题设置z-index: 0;，让滚动条在标题上方显示：

.scroll-container {
  position: relative;
  z-index: 1;
  overflow-y: auto;
}

.your-title-class {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

注意：如果是body的滚动条，层级调整可能无效，因为浏览器滚动条的层级高于页面元素，此时优先使用前两种方法。

内容的提问来源于stack exchange，提问作者Simon Trichereau