可变旋转文本的绝对位置

Question

我有一个垂直标题的横幅标题，该标题已使用position: absolute;对齐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类中。 我不明白你为什么用减号。 尝试将其删除

    .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>