Por que top: 0 não funciona em elementos absolutamente posicionados em relação ao corpo?
Você pode ver no código abaixo que oh1
empurra o corpo e o bloco absolutamente posicionado.absolute
não gruda no topo. Mas você também pode ver que o mesmo bloco está preso ao topo de seu pai.wrapper
. Por quê?
Não estou perguntando como fazer esse truque; Eu sei como, por exemplo preenchimento em vez de margem para h1 ou clearfix para pai e assim por diante.
Estou interessado em apenas uma coisa: por queh1
a margem da empresa empurra abody
, mas não está pressionando.wrapper
?
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: silver;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: darkblue;
}
.wrapper {
position: relative;
overflow:hidden;
width: 50%;
height: 200px;
overflow: hidden;
background-color: yellow;
}
.wrapper > .absolute {
background-color: darkcyan;
}
<div class="absolute"></div>
<h1>Some title</h1>
<div class="wrapper">
<div class="absolute"></div>
<h1>Some title</h1>
</div>
OK, vou tentar ser mais claro. Se você clicar no link abaixo, poderá ver o meu JSFiddle. Há simbackground-color: silver
nobody
etiqueta, rótulo, palavra-chave. Quando olho para o inspetor de código, vejo que a etiqueta do corpo começa um pouco mais baixa devido à margem h1. Masbackground-color
começa no topo. Isso significa que o inspetor de código está mentindo para mim e o corpo começa de cima. Mas por que, então, um elemento absolutamente posicionado é filho direto debody
não começa no topo?