试图给出一些css样式并更好地定位代码

Question

我正在使用以下代码，但效果很好，但几乎没有例外：

1. 无法移动到基于屏幕分辨率和div高度和宽度的位置，基本上如果内容较低，则在显示一小部分并切断剩余部分后自动发出声音。

2. 尝试使[X]保持在右上角，即使div框的大小很小或很大

3. 更好的CSS内容样式：

这是我的代码：

$('a.structureTypes').click(function() {
    var id = $(this).attr('data-value');
    var boxID = $(this).attr('data-id');
    $("#Structure" + boxID).fadeIn('slow');
});
$('.cancelStruct').click(function() {
    var boxID = $(this).attr('data-cancel');
    $('#Structure' + boxID).hide();
});

#box1 {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    color: #000;
    display: none;
    font-size: 12px !important;
    height: 100px;
    opacity: 0.6;
    position: absolute;
    width: 100px;
    z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Structure2" align="center" style="display: none; background: red;">
    <table align="center" style="
        background: white;
        ">
        <tbody>
            <tr>
                <td>Test Page 1<br/>test page2</td>
            </tr>
            <tr>
                <td><button type="button" data-cancel="2" class="cancelStruct">X</button></td>
            </tr>
        </tbody>
    </table>
</div>

http://prntscr.com/cndank