Css 放置浮动信息面板

我正在使用Jame Ferreira的Google脚本：企业应用程序概要来创建产品页面（第5章）。我已经创建了一个应用程序，它可以在一个页面上显示所有产品的缩略图，然后是一个信息面板，当用户将鼠标移到上面时会弹出更多详细信息。它使用CSS来实现这种样式

放置信息面板时出现问题。它只在一个位置弹出，而不是绑定到与其关联的缩略图

这是与信息面板相关的代码。我相信最后几行的位置存在问题，但我已经尝试了我能想到的一切：

function onInfo(e){
var app = UiApp.getActiveApplication();
var id = e.parameter.source;
for (var i in productDetails){
if(productDetails[i].id == id){
var r = 50;
var c = 0;
var infoPanel = app.createVerticalPanel().setSize('300px', '300px');
var horzPanel = app.createHorizontalPanel();
var image = app.createImage(productDetails[i].imageUrl).setHeight('100px');
var title = app.createLabel(productDetails[i].title);
horzPanel.add(image);
horzPanel.add(title);
var description = app.createLabel(productDetails[i].description);


infoPanel.add(horzPanel);
infoPanel.add(description);
applyCSS(infoPanel, _infoPanel);
applyCSS(image, _infoImage);
applyCSS(horzPanel, _infoBoxSeparator);
applyCSS(title, _infoTitle);
applyCSS(description, _infoDescription);

app.getElementById('infoGrid').setVisible(true)
.setWidget(0,0, infoPanel);
break;

}
c++
if (c == 3){
c = 0;
r = r+250;
}
switch (c)
{
case 0:
c=250;
break;
case 1:
c=500;
break;
case 2:
c=250;
break;
}
}

var _infoLocation =
{
"top":r+"px",
"left":c+"px",}

applyCSS(infoPanel, _infoLocation);

return app;
}

---

您可以使用

e.parameter.x

和

e.parameter.y

获取鼠标的位置，您可以根据它们定位infoPanel

infoPanel.setStyleAttribute('top',e.parameter.y)
    .setStyleAttribute('left',e.parameter.x).setStyleAttribute('zIndex','1')
    .setStyleAttribute('position','fixed');

您可以根据需要在鼠标的x和y位置添加一些偏移来显示它

在处理函数中获得的位置相关参数为

e.parameter.x
e.parameter.y

e.parameter.clientX
e.parameter.clientY

e.parameter.screenX
e.parameter.screenY

---

好得多，但看起来好像，因为X和Y是相对于单元格设置的flextable。因此，即使我在第三列中，如果我一直在该列的左侧，infopanel也会一直显示在左侧。下面是一个Web应用程序链接@MartinK啊对不起，我没有尝试flexTable。我已经更新了我的答案，请检查一下。这可能会帮助你感谢你的更新！我试了又试，但是.client和.screen参数阻止任何面板显示。将继续寻找解决方案。谢谢你的时间，还有！这对我来说是无价的，因为我找到了我的方式通过天然气。