Iframe and overlayed button problem

I am using an iframe now i want to have a button inside the iframe on top right which will display only on mouse over. How can i add this button?开发者_如何学C Can anyone please help me into the right direction.

jQuery

$(function() {
    var close = $('#close');
    $('#frame').hover(function() {
        close.show();
    }, function() {
        close.hide();
    });
});

HTML

<div id="frame">
    <iframe src="http://example.com"></iframe>
    <div id="close">Close</div>
</div>

CSS

#frame {
    width: 400px;
    height: 300px;
    position: relative;
}

#frame iframe {
    width: 100%;
    height: 100%;
}

#close {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid red;
    background: #fff;
    padding: 5px;
}

jsFiddle.

Keep in mind this obscures a portion of the iframe. It would be a better idea to not do this.