Html 垂直徽章随着文本长度的增加而偏离边缘

我试图使一个垂直的“徽章”与浏览器的左/右边缘对齐。我目前的方法是做一个div并将其旋转90度，然后使用

position:fixed；左：0；top:20%

以正确放置，但我遇到了以下问题：

随着文本变长，小部件将与浏览器的左右边缘“分离”

演示：（请查看徽章与较长文字之间的差异）

当前代码：

<div id="badge-outer-2" style="background: #1508bc;color:#FFFFFF;position: fixed;border-top-right-radius: 5px; border-top-left-radius: 5px;transform:rotate(90deg);top: 50%;padding:8px;font-size:13px;box-shadow:0px 0px 4px rgba(0,0,0,0.4);z-index:99996;cursor:pointer; left: -50px">Not OK when the text is longer and longer</div>

文本越来越长时不正常

有人能给我指出这个问题的解决办法吗？为什么在增加文本长度后，它会远离边缘

---

谢谢。

元素的旋转默认基于其中心。只需使用

transform:rotate（90deg）

即可将其围绕中心轴旋转90度。这会导致不同大小元素的边位于不同的位置

相反，请尝试围绕左下角旋转：

transform-origin: 0 100%;

现在，无论两个元素有多高，它们都将靠近屏幕的左边缘，但硬编码的

左
偏移量会稍微弄乱它。相反，只需将它们定位在
左侧：0
始终将它们粘贴到屏幕的左侧。这样，您也不必为每个元素设置新的偏移

这是因为你在使用

left: -22px;

及

手动纠正旋转的某些副作用。也就是说，默认情况下，旋转相对于图元的中心旋转，因此在两侧留有空间。所发生的情况是，当您“忽略”相对于文本长度的校正时，例如
-50px
，您将获得该分离尝试将其更改为
-80px
或
-100px
，以了解我的意思。（如果“超调”，文本将完全消失。）

相反，使用

transform-origin: left bottom;

从适当的原点旋转，并设置

left: 0;

像这样：。
最好将您的CSS放在JSFIDLE中的CSS选项卡中：）
left: 0;