如何旋转文本并正确定位它？（CSS、HTML）

Question

我正在尝试将旋转标题放置在某些文本旁边。静态地，它可以通过绝对定位轻松工作（左图）。然而，当页面调整大小并且定位失败时，我遇到了困难（右图）。

\n

\n

\n

当前 CSS（可以更改）：

\n

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

\n

当前 HTML 结构（可以更改）：

\n

<header>\n    <h1 class="headline">\xc3\x9cber mich</h1>\n</header>\n<div class="text">\n  <p class="introduction">....</p>\n</div>\n

\n

我怎样才能定位元素，以便我始终保持20px在段落旁边？\n有人可以将我链接到现有模式如何解决这个问题吗？

\n

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

\n

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 */
}