javascript - Math formula for positioning a box relative to where the user clicked within constraints? -

this going difficult me explain i'm looking mathematical formula defines position box pops out relative user clicked in column of rows.

here's attempt @ articulating mean: https://imgur.com/a/dbja3

the red circle user clicks in column on left , box on right pops out. when user clicks row @ bottom of column box should pop out bottom edge lined bottom of column. if user clicks in middle should aligned middle. box pops out never runs past height of column on left user never has scroll.

does make sense? can use css set absolute position of box need formula work out should be.

i don't think there's 1 formula satisfy condition, programming can working. start obvious:

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

then refine it:

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