如何使用position absolute将旋转元素定位到body左上角且不消失？

• 定位属性的计算优先级高于transform：position: absolute搭配top:0; left:0的规则，会先把元素未应用任何变换的原始边界框的左上角，对齐到初始包含块（即视口左上角）的(0,0)坐标点，之后才会在渲染阶段对已经摆好位置的元素应用transform变换。
• CSS默认的旋转参考点transform-origin是元素自身的几何中心（对应默认值50% 50%）。当你对原始位置在视口左上角的元素应用90度旋转时，整个元素的边界会绕着自身中心发生坐标偏移，最终大部分内容会落到视口的上方负值坐标区域，自然就从可视区域消失了。

• 最优适配方案：修改旋转参考原点，让参考点和定位锚点对齐。给元素增加transform-origin: 0 0;规则，让旋转操作围绕元素自身的左上角（也就是被top/left锚定的那个点）执行。旋转完成后元素的锚点会和视口左上角完全重合，不会出现位置偏移丢失的问题。
• 不推荐的临时方案：手动根据元素旋转后的偏移量调整top/left值抵消偏移。比如90度顺时针旋转时，可以把top值设置为与元素自身高度相当的数值，但这个方案需要提前明确知道元素的固定尺寸，在内容自适应、元素尺寸动态变化的场景下维护成本极高。

关键认知：top/left这类定位属性永远基于元素的原始无变换边界计算，和后续应用的transform效果没有关联。

内容的提问来源于stack exchange，提问作者Valentino