如何实现div内元素相对父div定位？按钮仅悬停时位置正常

按钮堆叠错位是绝对定位的参照上下文匹配规则导致的：

• 你给带pilih类的选择按钮设置了position: absolute，这类定位元素会向上遍历最近的、设置了非static定位的祖先元素作为坐标参照；如果遍历完都找不到符合条件的祖先，就会直接以整个页面的视口为参照。
• 当前作为按钮父容器的.choices卡片，默认是静态定位（没有设置任何position属性），因此三张卡片内的所有按钮全部脱离文档流，统一参照整个页面的坐标定位，最终堆在同一处固定位置。
• 悬停时看起来位置正常，是因为.choices:hover设置的transform: scale(1.5)会临时生成独立的元素包含块——此时按钮才会临时把所属卡片作为定位参照，形成“只有悬停时位置才正确”的错觉。

只需要给.choices类补充一行定位规则，就能从根本上解决错位问题：

.choices {
  /* 保留原有所有样式 */
  position: relative;
}

修改后的效果：

• 每张卡片都会成为内部按钮的专属定位参照容器
• 无论是否触发悬停交互，每个按钮都会稳定固定在所属卡片的预设位置，不会跨卡片堆叠
• 原有的悬停缩放、阴影变化等交互效果完全不受影响

如果后续需要调整按钮位置，甚至可以把按钮的硬编码top值改成弹性定位的写法，适配不同卡片尺寸时不用反复计算像素值，维护起来更方便。

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