How to move an element to the mouse position

I'm trying to move an element when when the user clicks on the document, however, the element is moving to an offset position. How do I remove the offset when clicking? I'm trying to get the element to move to the exact position of the mouse, how do I do this? Would I need to use the .offset() function? If so, how would I do that?

HTML

Player Name:  <input type="text" name="name" id="name" /><br>
<button name="submt" id="meh">Submit</button>

JS

$(document).ready(function(){
    $(this).on("click", function(e){
        var x = e.pageX;
        var y = e.pageY;
        $("#meh").css("marginLeft", x);
        $("#meh").css("marginTop", y);
    })
})