使用position absolute定位可变垂直Banner标题的问题

这个问题我之前做项目时也踩过坑！核心问题在于你用了固定的left和bottom数值定位，但用户自定义文本长度变化时，.banner__caption的自身尺寸也会跟着变，固定偏移量自然就撑不住了。要让它死死钉在Banner的左下角，得换个思路——让定位参考元素自身的尺寸，而不是硬写死数值。

下面分两种垂直文本的实现方式，给出对应的解决方案：

方案1：用writing-mode实现垂直文本（推荐，更符合排版逻辑） #

这种方式不需要旋转元素，直接通过CSS书写模式让文本竖排，盒模型会自动适配，定位更可控：

.banner__wrap {
  background-color: grey;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 20px;
  height: 100vh;
  position: relative;
}

.banner__caption {
  position: absolute;
  bottom: 0; /* 对齐父元素底部 */
  left: 0; /* 对齐父元素左侧 */
  background-color: red;
  max-width: 270px; /* 保留你的最大宽度限制 */
  /* 实现垂直文本 */
  writing-mode: vertical-lr; /* 从上到下、从左到右竖排，可根据需求换成vertical-rl */
  text-orientation: upright; /* 可选：让字母/数字也垂直排列，默认是sideways */
  /* 调整到你想要的左下角位置（比如像原来一样向左偏移一点） */
  transform: translateX(-20px); /* 也可以用百分比，比如translateX(-10%)，相对于元素自身宽度 */
}

方案2：用transform: rotate实现垂直文本（兼容旧浏览器） #

如果你的项目需要兼容不支持writing-mode的旧浏览器，用旋转的话，关键是设置transform-origin（旋转原点），并结合translate来抵消旋转后的位置偏移：

.banner__wrap {
  /* 保持你的原有样式 */
  background-color: grey;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 20px;
  height: 100vh;
  position: relative;
}

.banner__caption {
  position: absolute;
  bottom: 0; /* 对齐父元素底部 */
  left: 0; /* 对齐父元素左侧 */
  background-color: red;
  max-width: 270px;
  /* 旋转实现垂直文本 */
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: bottom left; /* 把旋转原点设为元素的左下角，这是关键！ */
  white-space: nowrap; /* 防止文本换行，可选 */
}

为什么这个方案有效？ #

• 先通过bottom: 0和left: 0把元素的左下角对齐父元素的左下角，不管文本多长，这个基准点永远不会变。
• 旋转或书写模式改变文本方向后，用transform做偏移——translate的百分比是相对于元素自身尺寸的，所以不管文本内容怎么变，偏移比例都是固定的，不会出现错位问题。

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