重新定位图像的弹出窗口

Question

我有一个弹出窗口显示在图像上的特定位置，我的目标是检测元素的位置并检查是否接近左侧或右侧浏览器端的末尾。基本上现在发生的是弹出窗口被浏览器窗口重叠/剪切。 我希望发现这种情况何时发生，如果在左边是hapening，弹出窗口向右移动，反之亦然。有什么建议我怎么这么做？

Answer 1

您可以使用css将元素的left属性设置为50vw视口垂直宽度的一半减去元素width的一半，设置{{ 1}}到text-align

center

#popup {
  position: relative;
  left: calc(50vw - 100px);
  width: 200px;
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}