如何将绝对定位元素的锚点设为自身左下角实现稳定tooltip定位

优先推荐：纯CSS原生实现（无依赖、兼容性好） #

你要的「把元素2的锚点切换为自身左下角」的效果可以通过transform属性轻松实现，无需JavaScript：

实现原理 #

CSS的translateY变换的百分比取值是相对于元素自身高度计算的，我们只需先让元素2的左上角对齐元素1的右上角，再把元素2向上平移自身100%的高度，就能让元素2的左下角刚好和元素1的右上角对齐，完美适配元素2的动态尺寸。

代码示例 #

<!-- 结构示例 -->
<div class="element1">
  元素1（hover触发显示）
  <div class="element2">
    尺寸不固定的元素2<br>
    内容长度随意变化<br>
    始终保持左下角对齐元素1右上角
  </div>
</div>

.element1 {
  /* 作为元素2的定位上下文 */
  position: relative;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #333;
}
.element2 {
  position: absolute;
  /* 让元素2左上角对齐元素1的右上角 */
  left: 100%;
  top: 0;
  /* 向上平移自身完整高度，实现锚点切换为左下角 */
  transform: translateY(-100%);
  /* 可选：增加间距避免贴边 */
  margin-left: 8px;
  border: 1px solid #f60;
  background: #fff;
  padding: 4px 8px;
  /* 默认隐藏 */
  display: none;
}
.element1:hover .element2 {
  display: block;
}

该方案兼容IE9及以上所有现代浏览器，覆盖99%以上的使用场景。

兜底方案：原生JavaScript实现（适配极端低版本浏览器） #

如果需要兼容IE8及更早不支持CSS transform的浏览器，可以通过JS动态计算元素2的高度调整偏移量：

const el1 = document.querySelector('.element1');
const el2 = document.querySelector('.element2');

el1.addEventListener('mouseenter', () => {
  el2.style.display = 'block';
  // 动态获取元素2高度，设置负偏移
  el2.style.top = `-${el2.offsetHeight}px`;
});

el1.addEventListener('mouseleave', () => {
  el2.style.display = 'none';
});

对应CSS只需去掉transform: translateY(-100%);一行即可，其余配置和上面的CSS示例一致。

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