如何实现可正确定位的position:sticky垂直文本（纯CSS方案）

针对你遇到的垂直文本空白、滚动超出以及position:sticky失效问题，推荐使用writing-mode结合Flex布局的方案，完全规避transform:rotate带来的尺寸计算偏差，同时满足文本从父容器顶部开始、到底部结束且粘性固定的需求：

核心实现思路 #

1. 用writing-mode原生实现垂直文本，让浏览器正确识别元素占位，避免旋转导致的尺寸错位
2. 借助Flex布局让垂直文本容器与内容容器并排，消除多余空白
3. 结合position:sticky与height:100%，确保文本始终贴合滚动容器的可视范围，不超出滚动边界

完整代码示例 #

HTML结构 #

<div class="scroll-container">
  <div class="vertical-sticky">垂直固定文本</div>
  <div class="main-content">
    <!-- 这里填充长内容，用于测试滚动效果 -->
    <p>测试内容行1</p>
    <p>测试内容行2</p>
    <p>测试内容行3</p>
    <!-- 重复多行直到容器出现滚动条 -->
  </div>
</div>

CSS样式 #

/* 滚动容器：必须设置固定高度/最大高度，否则overflow和sticky无法生效 */
.scroll-container {
  max-height: 500px;
  overflow-y: auto;
  position: relative;
  display: flex;
  gap: 10px;
  border: 1px solid #eee;
}

/* 垂直粘性文本容器 */
.vertical-sticky {
  writing-mode: vertical-lr; /* 垂直从左到右排列，vertical-rl可改为从右到左 */
  position: sticky;
  top: 0;
  height: 100%; /* 占满滚动容器的可视高度 */
  flex-shrink: 0; /* 防止被内容容器挤压变形 */
  background: #ffffff; /* 避免滚动时内容穿透文本 */
  padding: 8px;
  display: flex;
  justify-content: flex-start; /* 文本从顶部开始排列 */
  align-items: center; /* 文本水平居中 */
  font-weight: bold;
  color: #333;
}

/* 主内容容器 */
.main-content {
  flex: 1;
  padding: 8px;
}

关键细节说明 #

• 消除初始空白：Flex布局的flex-shrink:0保证垂直文本容器宽度自适应内容，不会产生多余占位；writing-mode原生垂直排列避免了旋转带来的额外空白
• 避免滚动超出：height:100%让文本容器高度与滚动容器的可视高度完全匹配，position:sticky基于滚动容器定位，滚动时始终保持在可视范围内
• 粘性生效前提：滚动容器必须设置max-height/height，同时position:relative，否则sticky会相对于整个视窗定位，而非目标父容器

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