js 里TOP问题

Question

borderBox.style.top = -parseInt(ShowPoth.style.height) + Amplifier.getEvent(e).offsetY - parseInt(borderBox.style.height)/2;  borderBox.style.top =  Amplifier.getEvent(e).offsetY - parseInt(borderBox.style.height)/2;  
<div id="ShowPoth" style="width:300px; height:225px; border:solid #ccc 0px;overflow: hidden;font-size:1px;float:left;">
 <div id="borderBox" ></div>
</div>鼠标在borderBox中间  ， 可以跟着我鼠标的高度动上面是我写JS放大镜时候发现的问题 我认为第2条语句应该是对的， 用鼠标的高度减去borderBox的高度除以2，就可以让borderBox跟着我鼠标的高度走了， 但是不好使 。  然后我用了第一条语句红色，我认为是不好使的 负的ShowPoth的高度加上鼠标的高度减去小borderBox的高度除以2，  但是却好使了。  不知道为什么，谁能给我解释下。谢谢，JS放大镜功能已经实现就是这快不明白

Answer 1

borderBox.style.top
的初值 就是 -parseInt(ShowPoth.style.height)

Answer 2

那为什么 我初始值写0 ，borderBox 就不见了。   borderBox.style.top=0 不也是顶部吗？
就和又面写 borderBox.style.left=0 而没有写-parseInt(ShowPoth.style.width)

Answer 3

html 代码 是这样的一个容器div ，里面放了一张图片 当然是img 标签的形式然后 又往容器div 里 添加了 红框框的 div ， 效果是 
<div>
<img />
<div>
</div>
</div>也就是 红框框的 div 是 在img 后的， 会换行。那对应的top 应该是 容器div 的top + img 的高-parseInt(ShowPoth.style.width)实际上- 的是img 的高 ，只是 把容器 div 设置和 img 一样高了