如何将嵌套的hide元素对齐至第一个item？求响应式实现方案

问题说明 #

• 当前效果：鼠标悬停第二个.item时，其内部的.hide元素显示在自身下方。
• 需求：保持.hide嵌套在第二个.item内的前提下，让它显示在第一个.item下方并左对齐，且实现响应式（不能用固定偏移值）。
• 过往尝试：用margin-left: -30px实现偏移，但无法适配不同屏幕尺寸，缺乏响应性。

解决方案 #

核心思路是利用绝对定位+相对定位上下文实现响应式对齐，无需固定数值：

修改后的CSS代码

.container {
  display: flex;
  position: relative; /* 设置为绝对定位的参考容器 */
}

.item {
  padding: 1rem;
  cursor: pointer;
  position: relative; /* 修正原代码的拼写错误：relativ → relative */
}

.hide {
  opacity: 0;
  position: absolute; /* 改为绝对定位脱离文档流 */
  left: 0; /* 对齐容器左侧，即第一个.item的左边缘 */
  top: 100%; /* 定位到容器下方，也就是第一个.item的底部下方 */
  white-space: nowrap; /* 可选：防止内容换行破坏对齐 */
}

.item:hover .hide {
  opacity: 1;
}

HTML代码（保持原结构不变）

<div class="container">
   <div class="item">item</div>
   <div class="item">item
     <div class="hide">hide</div>
   </div>
</div>

原理说明 #

1. 给.container设置position: relative，让内部绝对定位的.hide以容器为基准定位，而非第二个.item。
2. left: 0直接让.hide对齐容器的左边缘，自然和第一个.item左对齐，无论容器或.item宽度如何变化都能适配。
3. top: 100%将.hide定位到容器的底部下方，正好落在第一个.item的正下方。
4. 这种方式完全基于容器的布局尺寸计算偏移，天生具备响应性，无需手动调整固定数值。

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