求助：使用position:relative实现Tooltip时兄弟元素移位，无法用absolute替代

我来帮你搞定这个问题！你遇到的移位问题根源在于当前的Tooltip是在文档流中渲染的——当它从display: none切换到inline-block时，会占据页面空间，自然会挤压周围的兄弟元素。

你提到position: absolute看起来是相对于浏览器窗口，但其实它的定位基准是最近的设置了非static定位的父元素，而不是默认的窗口。我们可以利用这一点来实现既不移位，又让Tooltip相对于锚点位置定位的效果：

修改后的CSS代码 #

.tooltip-anchor {
  position: relative; /* 关键：让Tooltip相对这个锚点定位 */
}

.tooltip-anchor:hover + .tooltip {
  display: block;
}

.tooltip {
  display: none;
  position: absolute; /* 脱离文档流，不再占据空间 */
  top: 100%; /* 把Tooltip放在锚点的正下方 */
  left: 0;
  color: #fff;
  background: #333;
  padding: 0.25em;
  /* 可选优化：防止文字换行，加个圆角 */
  white-space: nowrap;
  border-radius: 4px;
}

为什么这样有效？ #

• position: relative给锚点元素创建了一个定位上下文，这样Tooltip的absolute定位就会以锚点为基准，而不是浏览器窗口，完美符合你想要的“相对于原始位置”的需求。
• absolute定位会让Tooltip脱离文档流，所以它显示时不会占用页面空间，也就不会导致兄弟元素移位了。
• 你可以通过调整top、left的值来自由控制Tooltip的位置，比如想让它居中对齐锚点，可以改成：

  left: 50%;
  transform: translateX(-50%);
  

这样修改后，Tooltip就能正常显示而不会影响其他元素的布局啦！

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