0
Hello, I’m trying to (unsuccessfully) leave a div with menu components at the top and another div fix just below this. I left the first div fixed and put a margin-top on the second but when I scroll on the page the content of the second div goes behind the first and I wouldn’t want it to contain. 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>
It doesn’t even work if you put
position: fixedin it also?– Woss
I don’t understand which element you want to be fixed, and what is the order of the overlap, can you make that clearer? Organize your code better this way You can’t know how your navbar is and what’s causing the conflict.
– ClaraBatt
I added an image. The panels of the championships are appearing behind the first div#result is appearing behind the div#painel_bet and I would like it to only appear below.
– Guilherme Ramalho