<!-- Modo "static" -->
 
 
/* Se você não adcionar a propriedade "position" passando algum valor a div por padrão fica em modo "static", a div neste modo ("static") acompanha o fluxo da pagina e você não pode alterar através das propriedades "top" e "left" o deslocamento da a area visivel da div ou seja, ela permanece como parte integrante do fluxo da página não flutua sobre os itens diferentemente do modo "relative". */
#divQuadrada 
{
position:static;
/* veja como o conteudo se comporta aumente e diminua os valores a baixo "width" e "height" */
width:200px;
height:200px;
background-color: #333333;
}
 
 
<!-- Modo "absolute" -->
 
 
/* No modo "absolute" a div ignora o fluxo da página e fica posicionada onde foi definido em "top" e "left", teste alterando os valore de "left" e "top". */
 
#divQuadrada 
{
position:absolute;
/* aumente e diminua o top */
top:200px;
/* aumente e diminua o left */
left:100px;
/* veja como o conteudo se comporta aumente e diminua os valores a baixo "width" e "height" */
width:200px;
height:200px;
background-color: #333333;
}
 
 
<!-- Modo "relative" -->
 
/* No modo "relative" a div acompanham o fluxo da pagina mais através das propriedades "top" e "left" você pode deslocar a area visivel da div ou seja, ela permanece como parte integrante do fluxo da página e ao mesmo tempo ela flutua sobre os itens, teste aumentando e diminuindo os valores de left e top e você vai reparar que o conteúdo não se mexe a não ser que você aumente o tamanho dela "width" e "height" */
 
#divQuadrada 
{
position:relative;
/* desloque a area visivel aumente e diminua os valores a baixo "left" e "top" */
left:70px;
top:70px;
/* veja como o conteudo se comporta aumente e diminua os valores a baixo "width" e "height" */
width:200px;
height:200px;
background-color: #333333;
}
 
 
<!-- Modo "fixed" -->
 
 
/* No modo "fixed" a div ignora o fluxo da página e rolagem e fica posicionada onde foi definido em "top" e "left", ideal para fazer uma chamada de promoção em seu site, teste alterando os valore de "left" e "top". */
 
#divQuadrada 
{
position:fixed;
/* aumente e diminua o top */
top:200px;
/* aumente e diminua o left */
left:100px;
/* veja como o conteudo se comporta aumente e diminua os valores a baixo "width" e "height" */
width:200px;
height:200px;
background-color: #333333;
}