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.