html - 如何旋转文本并正确定位？ (CSS，HTML)

Question

我试图在某些文本旁边放置一个旋转的标题。从静态上讲，绝对定位非常容易(左图)。但是，当页面调整大小并且定位失败时，我遇到了困难(右图)。

当前 CSS(可以更改):

.headline {
  white-space: nowrap;
  position: absolute;
  top: 185px;
  left: -20px;
  transform: rotate(270deg);
}

当前的 HTML 结构(可以更改):

<header>
    <h1 class="headline">Über mich</h1>
</header>
<div class="text">
  <p class="introduction">....</p>
</div>

如何定位元素，以便始终在段落旁边保持 20px？有人可以将我与现有模式联系起来如何解决这个问题吗？

使用 JS(和 jQuery)的解决方案是一种选择，但我显然更喜欢 CSS。

Answer 1

遇到了同样的问题。设法用纯 CSS 解决这个问题:

.parent {
  position:relative
}

.child {
  position:absolute;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right;
  left: 30px // change this value to match needs
  top: 30px // change this value to match needs
}