jQuery/CSS Offset + mousemove question

Question

Demo: http://jsfiddle.net/H45uY/6/
What I'm trying to do here is make the top-left corner of the <div> follow the mouse. The code works fine without the paragraph (see demo above), but when you add a paragraph, the <div> is pushed up and the mouse is halfway down the side of the box. Why does the paragraph do this?
Thanks!

Answer 1

If you remove - offset.top and - offset.left it works in every position

Fiddle Demo

Answer 2

add top:0 and left:0 to the div style

Answer 3

You dont need to subtract the offset.

$div.css({
    top:event.pageY,
    left:event.pageX
})

This will put the box at the mouse position.