[Corrigir] O posicionamento Absolute não é relacionado a página, mas sim ao próximo elemento de contexto.

Existe um erro conceitual na aula 11 do curso de HTML5 e CSS3 I, na aula o professor fala que o position absolute posiciona elementos em relação a janela, quando na realidade ele posiciona elementos em relação ao seu contexto de posicionamento.

Isso quer dizer que ele irá posicionar baseado no primeiro elemento pai a ter um contexto de posicionamento (ex. position: relative);

Eu montei o seguinte GIST para explicar -> http://dabblet.com/gist/2fb36b86d0530ef71683e7447c56e2d7

Segue abaixo o código que demonstra as diferenças entre o Absolute e o Fixed que é de fato posicionado em relação a janela.

CSS

/**
 * The first commented line is your dabblet’s title
 */
* {
    margin:0;    padding: 0;    box-sizing: border-box;
    font-size: 40px;
    color: white;
}

body {
    background: white;
    min-height: 100%;}

.header {
    background: blue;
    width: 100%;
    height: 200px;}

.body {
    position: relative;
    height: 200vh;
    background: green;}

.absolutePosition {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    right: 0;
    top: 0;
}

.fixedPosition {
    background-color: pink;    
    width: 200px;
    height: 200px;
    position:fixed;
    right: 200px;
    top: 200px;
}

HTML (Dentro do Body)

<div class="header">
    HEADER
</div>
<div class="body">
    <p>BODY</p>
    <div class="absolutePosition">ABSOLUTE</div>
    <div class="fixedPosition">FIXADO</div>
</div>

Não consegui uma boa forma de sugerir esta mudança visto que o vídeo fala que o posicionamento absoluto é em relação a janela.