Div fixed on the top and another div with scroll below

0
Hello, I'm trying (unsuccessfully) to leave a div with menu components on top and another div fix just below it. I left the first div fixed and put a margin-top in the second but when I scroll on the page the content of the second div goes behind the first and I would not want that to happen. How can I fix this?

    <!DOCTYPE html>
    <html lag='pt-br'>
        <head>
            <meta charset="utf-8">
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="assets/css/style.css">
            <link rel="stylesheet" type="text/css" href="assets/css/w3.css">
            <link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
            <link rel="stylesheet" type="text/css" href="assets/pace/themes/blue/pace-theme-corner-indicator.css"> 
            <link rel="stylesheet" type="text/css" href="assets/pnotify/pnotify.custom.min.css">
            <title>Central Jogos</title>
        </head>

        <body class="body-top">
            <div id="barraNavegacao"></div>

    <style>
    .painel-aposta{
    position: fixed;
    top: 20px;
    z-index: 999;
    overflow: hidden;
    border: 2px solid rgb(221, 221, 221); 
    border-radius: 5px; 
    padding: 10px;
    margin-top: 40px; 
    margin-left: 10px; 
    margin-right: 10px; 
    font-size: 15px; 
    background: rgb(241, 241, 241);
    background-color: #e9e7e6;
}

.conteudo-jogos {
    overflow-x: hidden;
}

.painel-resultado {
    margin-top: 200px;
}
</style>

            <div class="conteudo-jogos">
                <!-- PAINEL APOSTAS INÍCIO -->
                <div id="painel_aposta" class="painel-aposta row">
                    <div class="row">
                        <div class="col-xs-6">
                            Aposta
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" id="adtested-on">R$</span>
                                    <input id="valor_aposta" value="5.00" style="width: 90px;" class="form-control parent-width js_money" data-aposta="5.00" aria-describedby="add-on">
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-6">
                            Prêmio
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" id="adtested-on">R$</span>
                                    <input id="valor_retorno" placeholder="Retorno" style="width: 90px;" class="form-control parent-width" data-aposta="5.00" aria-describedby="add-on" readonly="">
                                </div>
                            </div>
                        </div>                
                    </div>

                    <div class="pull-right">
                        <!-- <button id="finalizar_aposta" type="button" class="btn btn-info btn-sm" onclick="">
                            <i class="fa fa-refresh"></i>
                            Atualizar
                        </button> -->

                        <button id="finalizar_aposta" class="btn btn-success btn-sm" 
                                onclick="finalizaModal()">
                            <i class="fa fa-check"></i>
                            Finalizar
                        </button>
                    </div>
                    <p>Qtd. Jogos: <span id="qtdJogos">0</span></p>
                </div>
                <!-- PAINEL APOSTAS FIM -->

                <!-- COTAÇÕES INÍCIO -->
                <div id="resultado" class="painel-resultado"></div>
                <!-- COTAÇÕES FIM -->
            </div>

            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="assets/js/jquery.js"></script>        
            <script type="text/javascript" src="assets/js/config.js"></script>
            <script type="text/javascript" src="assets/js/webservice.js"></script>
            <script type="text/javascript" src="assets/js/index.js"></script>
            <script type="text/javascript" src="assets/js/jogos.js"></script>
            <script type="text/javascript" src="assets/js/bluetoothPrinter.js"></script>
            <script type="text/javascript" src="assets/pace/pace.min.js"></script>
            <script type="text/javascript" src="assets/js/jquery.mask.plugin.js"></script>
            <script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="assets/pnotify/pnotify.custom.min.js"></script>        
            <script type="text/javascript" charset="utf-8">
                $('#barraNavegacao').load('./navbar.html');

                if(localStorage.getItem('apostaSalva') != null) {
                    notificar('success', 'Aposta salva com sucesso!');
                    localStorage.removeItem('apostaSalva');
                }

                $(document).ready(function() {
                    listaCampeonatos();
                    removeJogo();
                    checarAtividade();
                    $('.js_money').mask('0000.00', {reverse: true});
                });
            </script>

        </body>
    </html>

    
asked by anonymous 07.05.2017 / 05:53

0 answers