fixed定位文本hover插入字母时偏移的问题求助

问题根源在于旋转后的坐标系统变化、绝对定位脱离文档流导致的布局错乱，以下是纯CSS的可行方案，无需JS：

核心修改思路 #

• 取消#element-to-appear的绝对定位，让它留在文档流中，显示时自然占据空间，避免手动用margin硬推后续元素
• 调整旋转元素的transform-origin和定位方式，修正旋转后的坐标偏移问题
• 用width+opacity的过渡动画实现淡入，同时保证元素占据的空间平滑扩展

修改后的完整代码 #

HTML（结构不变） #

<div class="wrapper">
    <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>

CSS #

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
}

.main-element {
    position: fixed;
    /* 调整定位，结合旋转实现垂直左上角固定 */
    left: 20px;
    top: 100%;
    /* 设置旋转原点为左下角，避免旋转后位置偏移 */
    transform-origin: bottom left;
    /* 旋转+上移，实现垂直排版并固定在左上角 */
    transform: rotate(-90deg) translateY(-100%);
    color: black;
    /* 确保内部元素不会换行 */
    white-space: nowrap;
}

#element-to-appear {
    display: inline-block;
    /* 初始隐藏：宽度为0+溢出隐藏+透明 */
    width: 0;
    overflow: hidden;
    opacity: 0;
    /* 同时过渡宽度和透明度，实现平滑展开+淡入 */
    transition: width 0.25s ease, opacity 0.5s ease;
    /* 对齐基线，避免字母上下偏移 */
    vertical-align: baseline;
}

#remaining-letters {
    /* 不需要margin偏移，因为element-to-appear会自然占据空间 */
    transition: none;
}

.main-element:hover #element-to-appear {
    /* hover时恢复宽度，显示内容 */
    width: 1.2em; /* 可根据字体大小调整，或用fit-content */
    opacity: 1;
}

关键修改说明 #

• 旋转与定位修正：用transform-origin: bottom left配合rotate(-90deg) translateY(-100%)，替代直接设置rotate:90deg和负top值，这样旋转后的元素能精准固定在屏幕左上角，不会因屏幕尺寸变化偏移
• 文档流内的动画：#element-to-appear通过width:0到指定宽度的过渡，在文档流内自然扩展空间，无需手动偏移后续元素，彻底解决hover时的整体位移问题
• 对齐优化：添加vertical-align: baseline确保新增字母和原有文字基线对齐，避免上下偏移

备选JS方案（如需更精准的宽度计算） #

如果需要自适应文字宽度，可通过JS动态获取#element-to-appear的真实宽度，hover时设置该宽度：

const appearEl = document.getElementById('element-to-appear');
// 先获取真实宽度，再重置回0
const realWidth = appearEl.offsetWidth;
appearEl.style.width = '0';

document.querySelector('.main-element').addEventListener('mouseenter', () => {
    appearEl.style.width = realWidth + 'px';
    appearEl.style.opacity = '1';
});

document.querySelector('.main-element').addEventListener('mouseleave', () => {
    appearEl.style.width = '0';
    appearEl.style.opacity = '0';
});

此时CSS中#element-to-appear的width初始值改为0，hover时的宽度设置删除即可。

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