可变旋转文本的绝对位置

Question

我有一个带有垂直文本的横幅标题，我使用 position: absolute; 将其排成一行。但是，此文本是用户定义的，因此随着文本的更改，对齐方式也会更改。我该如何定位它，使其无论文本如何都位于左下角？

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

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

h2 {
  margin: 0;
}

h4 {
  margin: 10px 0 0;
}

<div class="banner__wrap">
  <a class="banner__caption" href="www.google.com">
    <h2>this is my heading</h2>
    <h4>this is my cool subheading with a bunch of text</h4>
  </a>
</div>

Answer 1

调整transform-origin并添加这样的翻译：

body {
 margin:0;
}

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

.banner__caption {
  background-color: red;
  max-width: 270px;
  position: absolute;
  bottom:0;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}

h2 {
  margin: 0;
}

h4 {
  margin: 10px 0 0;
}

<div class="banner__wrap">
  <a class="banner__caption" href="www.google.com">
    <h2>this heading</h2>
    <h4>this is  subheading</h4>
  </a>
</div>

Answer 2

问题出在左边：-50px；在 banner__caption class 中。我不明白你为什么使用负号。尝试删除它

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

Answer 3

我会使用 position:fixed。类似于：

.wrapper {
  position: fixed;
  left: 0px;
  top: 0px;
  background: red;
}

.content {
  position: absolute;
  bottom: 0px;
  transform: rotate(90deg);
  transform-origin: 0 100%;
  background: red;
  white-space: nowrap;
}
.read-up {
  -webkit-transform: rotate(180deg);
}

<div class="wrapper">
  <div class="content">
   <div class="read-up">
    Content goes hereeeeeeee
   </div>
  </div>
</div>

可变旋转文本的绝对位置

Position absolute for variable rotated text

html

css

css-transforms