如何将div元素friend_info的右上角定位到按钮friend-button的左上角？

核心问题分析 #

1. CSS规则冲突：.friend_info的初始CSS同时设置了left: 0px和right: 0px，这会让fixed定位的元素自动拉伸并居中，直接覆盖JS动态设置的left值，导致元素出现在按钮中间。
2. 宽度获取不准确：由于.friend_info初始状态为display: none，用jQuery的width()方法获取的宽度可能为0或不准确，造成定位计算偏差。

修复步骤 #

1. 修正CSS样式 #

修改.friend_info的CSS，移除冲突的left和right属性，同时添加z-index确保元素显示在按钮上方：

.friend_info{
    display: none;
    position: fixed;
    width: 20vw;
    height: 20vh;
    text-align: center;
    top: 0px;
    z-index: 100; /* 确保悬浮层显示在其他元素之上 */
}

2. 修正JavaScript代码 #

改用元素自身的getBoundingClientRect()获取准确尺寸，避免display: none导致的宽度错误，同时调整定位逻辑确保右上角对齐按钮左上角：

var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");

friend_button.addEventListener("mouseover", function(){
    const btnRect = friend_button.getBoundingClientRect();
    // 临时显示元素以获取真实尺寸
    friend_info.style.display = "block";
    const infoRect = friend_info.getBoundingClientRect();
    // 计算定位：friend_info右上角对齐按钮左上角
    friend_info.style.left = `${btnRect.left - infoRect.width}px`;
    friend_info.style.top = `${btnRect.top}px`;
});

friend_button.addEventListener("mouseout", function(){
    friend_info.style.display = "none";
});

可选优化（避免闪烁） #

如果担心临时显示元素出现闪烁，可先设置元素为不可见但保留布局，获取尺寸后再显示：

friend_button.addEventListener("mouseover", function(){
    const btnRect = friend_button.getBoundingClientRect();
    // 先隐藏视觉效果，保留布局以获取尺寸
    friend_info.style.visibility = "hidden";
    friend_info.style.display = "block";
    const infoRect = friend_info.getBoundingClientRect();
    // 计算定位
    friend_info.style.left = `${btnRect.left - infoRect.width}px`;
    friend_info.style.top = `${btnRect.top}px`;
    // 恢复可见
    friend_info.style.visibility = "visible";
});

效果验证 #

完成修改后，鼠标悬停按钮时，.friend_info的右上角会精准对齐按钮的左上角，稳定显示在按钮左侧。

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