Javascript 相对于用户在约束内单击的位置定位框的数学公式？

这对我来说很难解释，但我正在寻找一个数学公式，它定义了一个框相对于用户在一列行中单击的位置弹出的位置

这里有一个尝试来阐明我的意思：

红色圆圈是用户在左侧列中单击的位置，右侧的框是弹出的框。因此，当用户单击列底部的一行时，框应弹出，以便底部边缘与列底部对齐。如果用户在中间点击，它应该与中间对齐。这样弹出的框就不会超过左侧列的高度，用户就不必滚动

---

这有意义吗？我可以使用CSS设置长方体的绝对位置，但我只需要一个公式来计算它应该在哪里。

我认为没有一个公式可以满足这个条件，但通过一些编程，你可以让它工作。你从显而易见的事情开始：

top    := click.y - height / 2
bottom := click.y + height / 2

然后，您可以对其进行优化：

if bottom > container.height -> 
    bottom := container.height
    top    := MAX(0, bottom - height)
elif top < 0 ->
    top    := 0
    bottom := MIN(container.height, height)
fi

if-bottom>container.height->
底部：=容器高度
顶部：=最大值（0，底部-高度）
elif top<0->
顶部：=0
底部：=最小值（容器高度，高度）
fi

这有效地达到了我想要的效果，但我想到了一种更酷的方法，即右侧框的位置始终与左侧单击的相同位置对齐，即使它没有溢出。我一点也解释不清楚…@Pancakes这个伪代码会根据垂直中心位置排列，就像你画的那样。哦，等等，现在我觉得很愚蠢。我把一个非常简单的解决方案复杂化了。你的解决方案正是我想要的lol我甚至在想什么。谢谢@煎饼很乐意帮忙：）