如何避免垂直Flexbox中的旋转元素出现重叠问题？

首先得说，你遇到的重叠问题主要是两个核心原因导致的：一是hr用了position:fixed，直接脱离了Flex容器的布局上下文——这意味着你设置的Flex布局规则对它完全不起作用；二是用了margin-top:80%这种百分比间距，再加上容器高度用100vw，缩放时尺寸计算逻辑混乱，自然就会出现重叠。

给你调整后的方案，核心是让所有元素都留在Flex布局里，用Flex的原生属性控制间距，同时优化定位和尺寸逻辑：

<div style="position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; /* 控制线条和文本的间距 */ transform: rotate(-90deg); transform-origin: top left; /* 以左上角为旋转原点，确保定位准确 */ height: auto; width: auto; padding: 20px 0;">
  <hr style="width: 120px; /* 直接设置固定宽度，旋转后变成垂直长度 */ border: none; border-top: 1px solid #000;">
  <h3 style="font-family: Italianno; font-size: 2.5rem; margin: 0;" id="fancy-logo">Sorority</h3>
</div>

关键调整点说明： #

• 把整个容器设置为position: fixed; top:0; left:0，直接固定在左上角，比用margin-right:90%更可靠，不会受页面其他元素影响
• 给容器设置transform: rotate(-90deg)和transform-origin: top left，这样整个容器（包括线条和文本）一起旋转，避免单独旋转每个元素导致的位置混乱
• 用Flex的gap属性替代margin-top，直接控制线条和文本的间距，缩放时这个间距会保持一致
• 移除hr的position:fixed，让它留在Flex容器里，受Flex布局规则约束
• 给hr设置固定宽度（旋转后会变成垂直方向的长度），比用百分比更稳定；同时去掉多余的样式，简化线条的定义
• 给h3去掉margin-top，避免和Flex的gap冲突，保持布局整洁

额外优化建议： #

如果需要适配不同屏幕尺寸，可以把固定的间距和尺寸换成相对单位（比如rem或者vw），比如把样式抽出来写在<style>标签里，更易维护：

.fancy-header-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  transform: rotate(-90deg);
  transform-origin: top left;
  padding: 1.5rem 0;
}

.fancy-header-container hr {
  width: 8vw; /* 用vw适配屏幕宽度 */
  border: none;
  border-top: 1px solid #000;
}

.fancy-header-container h3 {
  font-family: Italianno;
  font-size: 3vw;
  margin: 0;
}

这样调整后，不管怎么缩放页面，线条和文本的间距都会保持稳定，不会出现重叠的情况啦～

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