弹窗显示位置异常：为何出现在左上角而非星星位置？

问题根源 #

你的弹窗定位错误是因为：

• 星星元素.images设置了position:absolute，导致它脱离文档流，父容器.clickToShowInfo因没有内容支撑，宽高塌陷为0，变成页面左上角的一个不可见点。
• 弹窗.info是相对于父容器.clickToShowInfo定位的，自然就固定在左上角了。

修复方案 #

1. 调整CSS样式 #

修改父容器和星星的定位规则，让父容器跟随星星的尺寸和位置：

.clickToShowInfo {
    position: absolute; /* 改为绝对定位，直接控制容器位置 */
    display: inline-block; /* 让容器贴合星星的实际尺寸 */
}

.images {
    position: static; /* 去掉绝对定位，让父容器能包裹住星星 */
    display: block;
}

.clickToShowInfo:active .info { visibility: visible; }
.info:hover { visibility: visible; }

.info {
    position: absolute;
    top: -10px; /* 补上单位px，之前的写法不生效 */
    left: 0;
    visibility: hidden;
    z-index: 100;
    background-color: rgb(0, 47, 255);
    box-shadow: 5px 5px 2px #aaa;
    border: 1px solid grey;
    padding: 8px;
    width: 220px;
    height: 200px;
}

.info:active {
    visibility: hidden;
    height: 0px;
    width: 0px;
    left: -1000px;
    top: -1000px;
}

2. 调整JavaScript逻辑 #

把随机位置的设置目标从星星元素改为它的父容器，让整个容器（星星+弹窗）一起移动：

function randomizeStars() {
    var arrayIDs = ["imgID1", "imgID2", "imgID3", "imgID4"];
    var amount = arrayIDs.length;
  
    for (i=1;i<=amount;i++) {
     var element = document.getElementById(arrayIDs[i-1]);
     var parentContainer = element.parentElement; // 获取父容器
     var positionInfo = element.getBoundingClientRect();
     var imgHeight = positionInfo.height;
     var imgWidth = positionInfo.width;
  
     var screenWidth = window.innerWidth;
     var screenHeight = window.innerHeight;
  
     var imgLeft = Math.floor(Math.random() * (screenWidth - imgWidth));
     var imgTop= Math.floor(Math.random() * (screenHeight - imgHeight));
  
     // 将位置设置给父容器，而非星星本身
     parentContainer.style.top = imgTop+"px";
     parentContainer.style.left = imgLeft+"px";
    }
}

randomizeStars();

逻辑说明 #

• 父容器改为绝对定位后，会成为弹窗的定位基准，我们直接控制父容器的位置，就能让星星和弹窗同步移动。
• 星星去掉绝对定位后，父容器会自动适配星星的尺寸，确保弹窗的定位基准和星星的位置完全重合。
• 补充.info的top属性单位，解决之前定位值不生效的问题。

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