Html 变量旋转文本的绝对位置

我用

position:absolute排列了一个横幅标题和垂直文本。但是，此文本是用户定义的，因此随着文本的更改，对齐方式也会更改。我如何定位它，使它无论文本如何都保持在左下角


.banner\uu包装{
背景颜色：灰色；
保证金：0自动；
最大宽度：1180px；
填充：0 20px；
高度：100vh；
位置：相对位置；
}
.banner\u标题{
底部：150px；
背景色：红色；
左：-50px；
最大宽度：270px；
位置：绝对位置；
变换：旋转（-90度）；
}
氢{
保证金：0；
}
h4{
利润率：10px0；
}
调整
变换原点
并添加如下翻译：


正文{
保证金：0；
}
.横幅{
背景颜色：灰色；
保证金：0自动；
最大宽度：1180px；
填充：0 20px；
高度：100vh；
位置：相对位置；
}
.banner\u标题{
背景色：红色；
最大宽度：270px；
位置：绝对位置；
底部：0；
变换：旋转（-90度）translateY（100%）；
变换原点：左下角；
}
氢{
保证金：0；
}
h4{
利润率：10px0；
}
调整
变换原点
并添加如下翻译：


正文{
保证金：0；
}
.横幅{
背景颜色：灰色；
保证金：0自动；
最大宽度：1180px；
填充：0 20px；
高度：100vh；
位置：相对位置；
}
.banner\u标题{
背景色：红色；
最大宽度：270px；
位置：绝对位置；
底部：0；
变换：旋转（-90度）translateY（100%）；
变换原点：左下角；
}
氢{
保证金：0；
}
h4{
利润率：10px0；
}
问题出在左边：-50px；在标题类中。我不明白你为什么用负号。试着移除它

    .banner__caption {
      bottom: 150px;
      background-color: red;
      max-width: 270px;
      position: absolute;
      transform: rotate(-90deg);
    }

问题是左边：-50px；在标题类中。我不明白你为什么用负号。试着移除它

    .banner__caption {
      bottom: 150px;
      background-color: red;
      max-width: 270px;
      position: absolute;
      transform: rotate(-90deg);
    }

我会使用
位置：fixed
。比如：


.wrapper{
位置：固定；
左：0px；
顶部：0px；
背景：红色；
}
.内容{
位置：绝对位置；
底部：0px；
变换：旋转（90度）；
变换原点：0.100%；
背景：红色；
空白：nowrap；
}
.读{
-webkit变换：旋转（180度）；
}

内容放在这里
我会使用
位置：fixed
。比如：


.wrapper{
位置：固定；
左：0px；
顶部：0px；
背景：红色；
}
.内容{
位置：绝对位置；
底部：0px；
变换：旋转（90度）；
变换原点：0.100%；
背景：红色；
空白：nowrap；
}
.读{
-webkit变换：旋转（180度）；
}

内容放在这里
工作完美！谢谢工作完美！谢谢