Is it possible to change the css3 of the table (in JqGrid) to change the positioning on the page?

Is it possible to change the table's placement on the JqGrid library page?

When the Jqgrid table returns a lot of data, it creates a vertical scrollbar.

When descending to view the last records the table goes to behind the menu but does not go back from the top. Only the table, the rest of the 'div' goes, like filter fields with 'inpunt' and 'select', that goes right behind the top. I already tried Z-index on top. See the image below:

HTML:

@{ViewBag.Title="Index";
}

<link href="~/Areas/Representantes/Script/consultaentrega/ConsultaEntregaEstilo.css" rel="stylesheet" />
<br /><br />
<div class="alinaresquerda">

    <center><img src="~/Content/imagem/logo.png" id="recurso" /></center>
    <div class="bs-callout bs-callout-primary">
        <center><h4>CONSULTA ENTREGA</h4></center>
    </div>


    <input type="hidden" id="sessaoRepresentante" value="@ViewBag.representante" />

    <fieldset class="grupo">
        <div class="campo">
            <label for="nome">Representante</label>
            <select class="form-control" name="codigoRepresentante" id="representante"></select>
        </div>
    </fieldset>



    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
    <hr />


</div>
<br /><br />
<script src="~/Areas/Representantes/Script/consultaentrega/consultaentregalista.js"></script>

JS:

    var url = "/Representantes/ConsultaEntrega/lista";

$(document).ready(function () {

    //Verifica permissão 
    var recurso = "TELA_REPRESENTANTE_CONSULTA_ENTREGA";
    VerificaPermissao(recurso); 

    var representante = $("#sessaoRepresentante").val();

    if ($("#sessaoRepresentante").val() != "0") {
        $("#representante").prop("disabled", true);
    }

    CarregaRepresentante(representante);    

    var $table = $("#jqGrid");

    $table.jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  
        postData: {
            representante: function () { return jQuery("#representante option:selected").val(); }         
        }, 
       colModel: [
           { label: 'PEDIDO', name: 'D2_PEDIDO', width: 60 },
           { label: 'DOC', name: 'F2_DOC', width: 80 },
           { label: 'SERIE', name: 'F2_SERIE', width: 40 },
           { label: 'CLIENTE', name: 'F2_CLIENTE', width: 60 },
           { label: 'LOJA', name: 'F2_LOJA', width: 50 },
           { label: 'ZRAZAO', name: 'F2_ZRAZAO', width: 250 },
           { label: 'CHVNFE', name: 'F2_CHVNFE', width: 320 },
           { label: 'CODTRA', name: 'CODTRA', width: 60},
           { label: 'NOMETRA', name: 'NOMETRA', width: 120 },
           { label: 'NOMERED', name: 'NOMERED', width: 80 },
           { label: 'EMISSAO', name: 'F2_EMISSAO', width: 80 },
           { label: 'ZDTSAID', name: 'F2_ZDTSAID', width: 80 },
           { label: 'GWU_DTPENT', name: 'GWU_DTPENT', width: 80 },
           { label: 'GWU_DTENT', name: 'GWU_DTENT', width: 80 }


        ],

         viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            height: "auto",
            //height: 400,
            emptyrecords: "Nenhum Registro",
            loadtext: "Buscando e carregando...",
            //rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });


    $('select#representante').on("change", function () {

        var id = $("#representante").val();
        $("#nome").val('');
        $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
    });


    function CarregaRepresentante(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarRepresentante",
            async: false,
            success: function (data) {

                $("#representante").empty();

                if (representante == 0) {
                    $("#representante").append('<option value="" disabled selected hidden>Selecione...</option>');
                }

                $.each(data, function (i, element) {
                    if (representante > 0) {
                        if (representante == element.codigoRepresentante) {
                            $("#representante").append('<option  value=' + element.codigoRepresentante + ' selected >' + element.nome + '</option>');
                        }
                    }
                    $("#representante").append('<option value=' + element.codigoRepresentante + '>' + element.nome + '</option>');
                });
            }
        });
    }



});

Top CSS (generated by the framework):

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
@media (min-width: 768px)
.navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}