Existe uma frase desse tipo no tutorial CSS do tutorial novato
A posição de um elemento absolutamente posicionado é relativa ao elemento pai posicionado mais próximo.Se o elemento não tiver um elemento pai posicionado, sua posição será relativa a <html>
Eu sempre usei essa frase como padrão para posicionamento absoluto. Até hoje, descobri por acidente que os elementos ancestrais não estavam posicionados como elementos de posicionamento absoluto. Se o posicionamento ou a largura e a altura não são relativos, mas a janela do navegador é a janela de exibição.
demo:
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<style>
html {
min-width: 1200px;
}
.box {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
Após definir a largura, a largura e o posicionamento da caixa sempre são relativos ao tamanho da janela do navegador, não ao HTML.
Mais tarde, verifiquei o documento MDN e descobri que a definição do tutorial para iniciantes não é precisa, pois está escrita no MDN assim:
Elementos absolutamente posicionados são posicionados em relação ao elemento ancestral não estático mais próximo. Quando esse elemento ancestral não existe, é relativo ao ICB (bloco inicial do contêiner, bloco inicial de contenção).
Bloco de inclusão inicial:
- O bloco contendo o elemento raiz é um retângulo, chamado bloco contendo inicial;
- Para [Mídia contínua], o tamanho do bloco inicial é igual ao tamanho da janela de exibição e o ponto inicial é a origem da tela;
- A direção do bloco que contém a inicialização é a mesma que a direção do elemento raiz;
- O bloco de inclusão inicial não é uma viewport, apenas o mesmo tamanho;
Resumo: Se não houver um elemento ancestral que não esteja estaticamente posicionado no elemento absolutamente posicionado, ele não será posicionado em relação ao bloco inicial, e o tamanho e a direção do bloco inicial serão os mesmos da viewport.