Javascript 根据框位置打开弹出模式

我希望弹出模式打开框所在的位置。对于放置在顶部的两个框，模式打开正确，我也尝试放置在底部的最后两个框

{
 top: 0 + 'px'+ this.el.nativeElement.offsetTop + 'px',
 right: ((window.innerWidth || document.documentElement.clientWidth) - x.left) - 20 + 'px',
 height: 'auto',
 width: 58 + '%',
 display: 'flex'
};

我尝试添加offsetop，但是模态被放置在底部

可复制堆栈闪电战

不添加任何顶部值（适用于顶部两个框）（底部两个框的期望值相同）

---

我希望类似的行为发生在前2个框中，每当我在底部2个框中悬停时，模式从顶部向前2个框附近打开，而预期是直到我滚动到屏幕顶部时，模式应该从那里打开，尝试将变量与getBoundingClientRect一起使用，小示例，更改：

this.modelstyle {
    top: 0 + px;
  ...here other your code...
}

到

---

此.el.nativeElement.offsetTop

未考虑滚动条的位置是的，我尝试考虑滚动条，但它不工作，请，显示this@Enthu因此，当用户单击底部框时，您需要向上滚动到顶部，对吗？打开模式应与前两个框的情况类似。弹出窗口不仅在框所在的位置打开，而且第二个框的红色箭头也会移动。因此，您需要打开3个和4个弹出窗口，而不是在红色框附近，而是在文档的底部，对吗？我希望在前两个框中出现类似的行为，每当我在底部两个框中悬停时，模态将从顶部打开，靠近前两个框，而期望的是直到我滚动到屏幕顶部时模态应打开检查此链接

this.modelStyle {
   top: x.top + window.scrollY + 'px',
...here other your code...
}