Javascript 使用OnMouseOver功能在页面中定位图像

我有一个函数，onmouseOverload一个javascript函数

function imgEnlarge(val) {
    var imageFile = getVal(arrayFile, {
        'id': val
    }, 'picture');
    var imagePath = 'admin/img/' + imageFile;
    document.getElementById("imgDisplay").innerHTML = '<img src="' + imagePath + '" style="width:800px;height600px">';
} //end enlarge function


.imgDisplay {
    top: 50;
    left: 200;
    position: absolute;
    z - index: 999;
    width: 600 px;
    height: 500 px;
}

函数imgEnlarge（val）{
var imageFile=getVal（数组文件{
“id”：val
}"图片",；
var imagePath='admin/img/'+imageFile；
document.getElementById（“imgDisplay”）.innerHTML=''；
}//结束放大功能
.imgDisplay{
前50名；
左：200；
位置：绝对位置；
z指数:999 ;；
宽度：600像素；
高度：500像素；
}

问题是，当我向下滚动到页面中间时，显示屏仍在“页面顶部”，因为我可以看到div上显示的图像底部

我的站点顶部有一个id为imgDisplay的空div

---

如何修复代码，以便在MouseOver上，图片显示在当前屏幕X，Y而不是顶部：和左侧：（从页面顶部）

您只需将图像的位置设置为固定，顶部和左侧属性设置为0即可

下面是一个javascript解决方案：

 var image = document.getElementById('imgDisplay');

    image.addEventListener('mouseover', function(){
        this.style.position = "fixed";
        this.style.top = 0;
        this.style.left = 0;
    });

---

请缩进你的代码！尝试

position:fixed

而不是

position:absolute