CSS下拉菜单tooltip位置随选项数量变化的问题求助

问题原因 #

你当前的位置偏移问题核心出在 .tooltip 的定位配置上：你用了 transform: translate(-25%, calc(40%)) 做Y轴位移，CSS中transform的百分比值是相对于元素自身的尺寸计算的，Y轴的40%是tooltip自身高度的40%。当选项数量变化时，tooltip高度会变，对应的Y轴偏移量也会同步变化，最终导致整体位置偏移。

修改方案 #

把tooltip的Y轴定位改为基于父级.container的固定相对位置，不要使用相对于自身高度的百分比值：

1. 删掉原来的 top: 0 配置，改为 top: 100%，让tooltip的顶部刚好对齐父容器（也就是触发图标）的底部
2. 把transform的Y轴偏移改为固定像素值（数值可以根据你需要的间距调整），替换原来的百分比值，这样不管tooltip高度怎么变，它和触发图标之间的间距都是固定的

修改后的.tooltip 样式参考：

.tooltip {
  min-width: 10rem;
  width: auto;
  min-height: 2rem;
  height: auto;
  background-color: var(--app-secondary-color);
  text-align: center;
  position: absolute;
  z-index: 1;
  font-size: 1.2rem;
  display: flex;
  justify-content: flex-start;
  padding: 1rem;
  flex-direction: column;
  box-shadow: 0 0.3rem 1.2rem #CCC;
  /* 仅修改以下两行定位配置即可 */
  top: 100%;
  transform: translate(-25%, 8px);
  border-radius: 3px;
}

小箭头的原有配置不需要调整，top: -10px 刚好可以让箭头指向触发图标的位置，对齐逻辑不会受影响。

内容的提问来源于stack exchange，提问作者Jose Raul Perera