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>