Por que posição absoluta faz a página exceder?
Meu entendimento é que, quando um elemento é posicionado absoluto (mesmo com um valor de posição negativo), ele fica completamente fora do fluxo normal de conteúdo. Mas por que ainda faz a página transbordar? Quando você executa o snippet de código abaixo, a barra de rolagem horizontal aparece, e pensei que não deveria estar lá.
.relative {
position: relative;
background: pink;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>