Javascript DIV保留在任何表格的右上角

Question

这有点难以解释，但基本上我有一个WYSIWYG编辑器，我需要确保在单击该表时，div始终位于任何表的右上角。这个div有一些按钮可以控制点击特定单元格的颜色和边框等内容。

我当前的代码列在下面的JSfiddle以及下面的代码块中，我们将非常感谢任何帮助。

我的一个想法是检测任何表中的列数，然后将div放在第一行的最后一列中，但我无法使其工作。虽然我确实寻找了一些解决方案/尝试了我自己的五六个小时。如果有任何问题/建议，请随时发布。

fiddle

$('.myTblBody tr td').click(function () {
    var html = $(this).text();
    var x = (this).rows[0].cells.length;
    $('#box').remove();
    $(this).parent().append('<div id="box" style="width:50px; height:20px; background-color:#666; position:absolute; margin-top:-25px; margin-left:-50px;">');
    //If you would like to know row and col number.
    var row = $(this).parent().index();
    var col = $(this).index();
    //    alert('row ==' + row + "col == "+ col);
});

Answer 1

将position:absolute;top:0;left:0;附加到框的样式属性;

这是更新的代码

$('.myTblBody tr td').click(function(){
    var html = $(this).text();
    $('#box').remove();
    $(this).parent().append('<div id="box" style="position:absolute;top:0;left:0; width:50px; height:20px; background-color:#666">');
    //If you would like to know row and col number.
    var row = $(this).parent().index();
    var col = $(this).index();
    alert('row ==' + row + "col == "+ col);
});

对小提琴http://jsfiddle.net/ravi441988/uRBgC/1/进行测试

Answer 2

如果您将div设置为position: absolute; top: 0; right: 0，并将任何父元素设置为position: relative，则div将显示在该元素的右上角。