#geral {
position: absolute;
width: 900px;
left: 40px;
background-color: #999;
}
#p_absolute {
position: absolute;
width: 250px;
left: 800px;
top: 50px;
background-color: #06C;
}
Gera um elemento com posicionamento absoluto, posicionado relativo ao elemento pai que tiver qualquer outro valor de posicionamento diferente de static. O posicionamento deste elemento é especificado pelas propriedades top, right, bottom e left.
No caso, está se posicionando em relação à div Geral
#p_fixed {
position: fixed;
width: 250px;
left: 550px;
top: 50px;
background-color: #396;
}
Gera um elemento com posicionamento absoluto, posicionado em relação à janela do navegador. O posicionamento deste elemento é especificado pelas propriedades top, right, bottom e left.
Experimente usar a barra de rolagem para perceber que a div com posicionamento fixed não sai do lugar em relação ao fluxo da página.
#p_relative {
position: relative;
width: 250px;
margin: 80px 40px;
background-color: #A8E;
}
Gera um elemento com posicionamento relativo, posicionado em relação a sua posição normal, portanto left:20px adiciona 20px à esquerda da posição normal do elemento.
#p_static {
position: static;
width: 250px;
margin: 80px 40px;
background-color: #FC0;
}
Default. Sem posição, o elemento fica no fluxo normal do documento (ignora declarações top, right, bottom, left ou z-index).
#p_inherit {
background-color: #900;
width: 350px;
}
Especifica que o valor da propriedade position deve ser herdada do objeto pai.