如何在javascript/jquery中显示相对于视图的弹出元素，而不是网页？

Question

我有一个包含视频和图片的表格的网页，当这些项目中的任何一个被点击时，被点击的项目显示在一个浮动的弹出式显示区域中，但目前这个区域显示在网页的顶部附近，所以当用户滚动网页以使视频和图片的表格完全滚动到视图中时，通常是部分屏幕外，因此用户必须向上滚动页面来查看浮动弹出显示区域，远离他们在表格中点击的行项目，在那里他们可以编辑关于该项目的信息。

我更希望弹出显示区域显示在视口顶部附近，这样就可以完全看到它，而无需用户将其滚动到视图中，并且现在弹出显示下的视频和图片表停留在用户单击表中任何项之前的位置。

我看过这个主题Set element to top of viewport in javascript [duplicate]，但我不想修复显示区域，因为用户应该能够正常滚动网页，弹出显示区域与页面上的其余元素一起移动。

一旦这一点完成，我将希望使弹出式区域可拖动，因此建议的解决方案(S)应该是兼容这样做。我计划使用How TO - Create a Draggable HTML Element，而不是使用jQuery或其他类型库。这样，我就可以优化弹出式元素的代码，该元素是页面上唯一可拖动的项。

谢谢

Answer 1

我也面临着同样的问题。然后我发现了一个我用过的CSS技巧。

​

.elements:nth-last-child(-n + 3) {
        // Insert CSS you want to apply
}

.elements:nth-last-child(n + 3) {
        // Insert CSS you want to apply
}

​

它帮助我实现了想要的解决方案。在JavaScript和视图中不做任何更改。你只需要用n数来计算。

作为参考，您可以使用以下文档- https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child