CSS中如何参照另一元素位置在悬停时定位HTML元素？

你之前的代码为什么完全失效 #

• 选择器逻辑不匹配：#first-element:hover #second-element 只会匹配「嵌套在first-element内部的second-element子元素」，但两个元素分布在表单不同区域，根本不是嵌套关系，从DOM层级上就选不中目标
• CSS语法非法：CSS原生不支持跨元素读取其他元素的几何属性当样式值，left:#first-element.left、height:#first-element.top+20px 这类写法完全不符合CSS规范，浏览器不会解析
• 属性使用错误：要设置元素的垂直停靠位置应该用top属性，height是控制元素自身高度的，和位置偏移没有关系

需求的可行实现路径 #

这个需求是完全可以实现的，根据场景不同有两种方案：

方案1：纯CSS实现（仅适合first-element位置固定的场景） #

如果first-element不会随页面布局动态改变位置，可以借助现代浏览器支持的:has()选择器实现hover触发逻辑，不需要JS：

1. 先给second-element设置默认隐藏、脱离文档流的基础样式：

   #second-element {
       display: none;
       position: fixed;
       z-index: 999;
       pointer-events: none;
   }
   

2. 全局匹配hover状态，控制元素显示：

   body:has(#first-element:hover) #second-element {
       display: block;
   }
   

   注意：纯CSS没有能力实时读取first-element的动态位置，如果你的first-element是flex弹性子项，会随视口宽度变化换行、改变坐标，这个方案没法实现自动对齐到元素下方20px的效果，必须用下面的JS方案。

方案2：精准适配动态弹性布局的方案（极少量原生JS） #

针对first-element会随flex布局换行移动的场景，用极短的JS就能实现精准对齐，没有第三方依赖：

1. 先写好second-element的基础样式，用visibility控制显隐避免排版抖动：

   #second-element {
       visibility: hidden;
       position: fixed;
       z-index: 999;
   }
   

2. 绑定hover事件，实时读取first-element的坐标设置位置：
   • 鼠标移入first-element时：
     1. 调用getBoundingClientRect()读取first-element的实时视口坐标，不管flex怎么换行、页面滚动都能拿到最新值
     2. 将second-element的left值设为和first-element的left完全一致
     3. 将second-element的top值设为 firstElement.top + firstElement.height + 20，正好实现元素下方20px的间距
     4. 将second-element的visibility设为可见
   • 鼠标移出first-element时，把second-element改回隐藏状态
3. 补充适配逻辑：给window绑定resize事件，如果窗口拉伸导致first-element位置变化时second-element仍处于可见状态，就重新计算一次位置，避免错位。

注意：不存在不需要JS就能跨元素读取实时动态位置的纯CSS方案，之前很多人提到的CSS变量实现，本质也是靠JS把计算后的位置值存到全局CSS变量里，最终还是依赖JS完成位置计算。

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