我想在表单下方区域生成一张统计图，结果生成的图充满了整个表单的区域，完全覆盖了，我改了div的position和z-index，似乎完全没用，是不是我哪些地方没设置啊？ PS:不加这个统计图的话能正常显示表单及数据，是不是这个模板页面表单区域不允许加其他控件啊？

<%
layout("/layouts/platform.html"){
%>

<header class="header navbar bg-white shadow">
    <div class="btn-group tool-button">
        <a class="btn btn-primary navbar-btn" href="${base}/platform/operate/tunnel/add" data-pjax><i class="ti-plus"></i>添加</a>
        <button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i>删除</button>
    </div>
    <!--<link href="${base!}/assets/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">-->
</header>

<div class=panel-body style="padding-top: 500px; position: absolute; z-index: 2">
    <div class="table-responsive no-border">
        <input id="unitid" type="hidden">
        <table class="table table-bordered table-striped mg-t datatable">
            <thead>
            <tr>
				<th>AA</th>
				<th>BB</th>
                                <th>CC</th>
				<th>DD</th>
				<th>FF</th>
				<th>EE</th>
				<th>GG</th>
                                <th>KK</th>
        </table>
    </div>
</div>

<!-->统计图div<--!>
<div id="container" style="position:absolute; top:300px; width:400px;height:400px; z-index: 1"></div>

<!-->统计图依赖<--!>
<script src="${base!}/assets/Highcharts/code/highcharts.js"></script>
<script src="${base!}/assets/js/jquery-1.8.3.min.js"></script>

<!-->生成测试统计图<--!>
<script type="text/javascript">
    var chart =Highcharts.chart('container', {

        chart: {
            type: 'column'
        },

        title: {
            text: 'Highcharts responsive chart'
        },

        subtitle: {
            text: 'Resize the frame or click buttons to change appearance'
        },

        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Bananas'],
            labels: {
                x: -10
            }
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Amount'
            }
        },

        series: [{
            name: 'Christmas Eve',
            data: [1, 4, 3]
        }, {
            name: 'Christmas Day before dinner',
            data: [6, 4, 2]
        }, {
            name: 'Christmas Day after dinner',
            data: [8, 4, 3]
        }],

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal'
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -5
                        },
                        title: {
                            text: null
                        }
                    },
                    subtitle: {
                        text: null
                    },
                    credits: {
                        enabled: false
                    }
                }
            }]
        }
    });
    $('#small').click(function () {
        chart.setSize(200, 100);
    });
    $('#large').click(function () {
        chart.setSize(500, 100);
    });
</script>

<script language="JavaScript">
    var datatable;
    function initDatatable() {
        datatable = $('.datatable').DataTable({
            "dom": '<"toolbar">frtip',
            "searching": false,
            "processing": false,
            "serverSide": true,
            "select": true,
            "ordering": true,
            "iDisplayLength": 6,
            "language": {
                "url": "${base}/assets/plugins/datatables/cn.json"
            },
            "preDrawCallback": function () {
                sublime.showLoadingbar($(".main-content"));
            },
            "drawCallback": function () {
                sublime.closeLoadingbar($(".main-content"));
            },
            "ajax": {
                "url": "${base}/platform/operate/tunnel/data",
                "type": "post",
                "data": function (d) {
                }
            },
            "order": [[0, "desc"]],
            "columns": [
				{"data": "code", "bSortable": true},
				{"data": "uint", "bSortable": true},
                {"data": "date", "bSortable": true},
				{"data": "road", "bSortable": true},
				{"data": "material", "bSortable": true},
				{"data": "length", "bSortable": true},
				{"data": "status", "bSortable": true},
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
                                ' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
                                '<li><a href="${base}/platform/operate/tunnel/edit/' + row.id + '" data-pjax>修改信息</a></li>' +
                                '<li><a href="javascript:;" onclick="">查看附件</a></li>' +
                                '<li><a href="javascript:;" onclick="">施工计划</a></li>' +
                                '</ul></div>';
                    },
                    "targets": 7
                },
                {
                    "render": function (data, type, row) {
                        if (data) {
                            return moment(parseInt(data*1000)).format("YYYY-MM-DD");
                        }
                        return '';
                    },
                    "targets": 2
                }
            ]
        });
        datatable.on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
        $("#searchBtn").on('click', function () {
            datatable.ajax.reload();
        });
    }
   
    $(function () {
        initDatatable();
    });

</script>

<%}%>