CSS问题：窗口缩放时Tooltip与PercentMemory线条对齐方案

问题核心：RateChart使用百分比宽度（动态），PercentMemory通过left:50% + transform: translateX(-50%)实现居中，但Tooltip采用全局绝对定位（固定left值），窗口缩放时RateChart的位置/宽度变化，导致Tooltip偏离竖线。媒体查询无法适配所有尺寸。

关键修改思路 #

将Tooltip的定位上下文从全局切换到RateChart（利用RateChart的position: relative），让Tooltip的位置随RateChart的尺寸动态调整，而非依赖固定像素值。

修改后的代码实现 #

import { COLORS } from "src/constants/colors"

export const Chart = () => {
  return (
    <>
      <RateChart>
        {/* 将Tooltip移入RateChart内部，共享同一个定位容器 */}
        <Tooltip>
          <TooltipText>
            <p>Average</p>
            <p>50%</p>
          </TooltipText>
        </Tooltip>
        <PercentMemory />
      </RateChart>
      <PercentLabel>
        <PercentText>100%</PercentText>
        <PercentText>50%</PercentText>
        <PercentText>0%</PercentText>
      </PercentLabel>
    </>
  )
}

const RateChart = styled.div`
  width: 98%;
  height: 32px;
  position: relative;
  margin: 100px auto 10px auto;
  background: linear-gradient(90deg,#0041f1 0%,#5c3eab 51.56%,#ea6a42 74.48%,#ee1818 100%);
  /* 保留原有其他样式 */
`;

const PercentMemory = styled.div`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFFFFF;
  height: 100%;
  width: 2px;
  z-index: 100;
  /* 保留原有其他样式 */
`;

const Tooltip = styled.div`
  width: 90px;
  height: 28px;
  position: absolute;
  /* 基于RateChart的50%位置居中，和PercentMemory对齐 */
  left: 50%;
  transform: translateX(-50%);
  /* 调整top值，将Tooltip放在RateChart上方（根据需求修改） */
  top: -40px;
  border-radius: 6px;
  padding: 8px 16px;
  z-index: 101; /* 确保Tooltip在竖线上方 */
  /* 保留原有其他样式 */
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    /* 箭头样式示例 */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid ${COLORS.tooltipBg};
    /* 保留原有其他箭头样式 */
  }
`;

const TooltipText = styled.div`
  /* 原有Tooltip文本样式 */
`;

const PercentLabel = styled.div`
  /* 原有标签容器样式 */
  display: flex;
  justify-content: space-between;
  width: 98%;
  margin: 0 auto;
`;

const PercentText = styled.p`
  /* 原有标签文本样式 */
`;

为什么这个方案有效 #

1. 定位上下文绑定：Tooltip现在是RateChart的子元素，RateChart的position: relative会成为Tooltip的定位参考，而非全局文档。
2. 动态对齐逻辑：Tooltip使用left:50% + transform: translateX(-50%)，和PercentMemory的居中逻辑完全一致，无论RateChart的宽度如何变化，两者的中心始终重合。
3. 无固定像素依赖：所有定位都基于百分比或相对位置，无需媒体查询即可适配任意窗口尺寸。

额外调整建议 #

• 如果Tooltip需要放在RateChart下方，将top改为calc(100% + 8px)（8px为间距），同时调整箭头的方向（将border-top改为border-bottom）。
• 若RateChart的位置有变化（比如margin调整），Tooltip的位置会自动跟随，无需手动修改定位值。

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