Olá, eu estava criando um programa para praticar, e o objetivo era criar um jogo de acertar o alvo, e contabilizar os acertos e erros. Mas tive um problema logo no inicio em posicionar corretamente cada elemento. Talvez seja só um simples detalhe, mas eu não tô visualizando.
O que acontece é que as tags canvas e 'p' com teste estão ficando sob o cabeçalho. Quando eu abro o DevTools e desmarco/desabilito as propriedades de position absolute, o problema se resolve, por isso eu penso que o problema esteja relacionado ao position, que eu esteja usando de forma errada. Ainda com a ferramenta do DevTools aberta, passando o mouse sobre o local que está o header, não aparece a marcação azul indicando conteúdo, como se não existisse e aí por isso o elementos seguintes sobem para o topo da página. Mas eu não apliquei nenhum position absolute no header. Alguém consegue me ajudar a entender o que está acontecendo?
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Game - Acerte o Alvo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<img id="alvo-cabeçalhoLeft" src="alvo.png">
<h1 class="titulo-cabeçalho">Acerte o Alvo</h1>
<img id="alvo-cabeçalhoRight" src="alvo.png">
</div>
</header>
<main>
<p>teste</p> //inseri apenas para ver o problema
<p>teste</p>
<canvas id="contadorAcertos" class="contador" width="100" height="30"></canvas>
<canvas id="contadorErros" class="contador" width="100" height="30"></canvas>
<canvas id="contadorPremio" class="contador" width="100" height="30"></canvas>
<script>
var tela = document.querySelector("#contadorAcertos");
var pincel = tela.getContext("2d");
pincel.fillRect(0, 0, 100, 30);
</script>
</main>
</body>
</html>CSS
.caixa {
width: 940px;
margin: 0 auto;
position: relative;
}
#alvo-cabeçalhoLeft {
width: 12%;
position: absolute;
top: 0;
left: 0;
}
#alvo-cabeçalhoRight {
width: 12%;
position: absolute;
top: 0;
right: 0;
}
.titulo-cabeçalho {
display: inline-block;
font-size: 33px;
font-weight: bold;
position: absolute;
left: 375px;
top: 36px;
}
