Um recurso interessante que o CSS trouxe ao webmaster foi o controle do posicionamento de objetos na tela, que não era possível apenas com o HTML convencional. Agora podemos não só definir a localização exata de um objeto, como também, sobrepo-los em camadas nas mais diferentes maneiras. Através da propriedade POSICION o posicionamento pode acontecer de três modos distintos: Absolute - O posicionamento é definido pelas margens superior e esquerda da tela. Relative - O posicionamento é definido pela margem inferior do último objeto e margem esquerda da tela. Static - O posicionamento é definido pelo próximo espaço disponível no canto esquerdo da tela. As propriedades left (esquerdo) e top (topo) define a distância que o objeto terá em relação ao browser ou a outro objeto dependendo do que for definido em posicion. As unidades que definem as distâncias podem ser em pixels (px), points (pt) e porcentagem (%). As propriedades width (largura) e height (altura) definem o tamanho do bloco que irá comportar o objeto. Suas unidades também são as já relacionadas acima: px, pt e %.   POSIÇÃO ABSOLUTA Quando você especifica uma posição absoluta em pixel de um objeto (um quadro, uma imagem ou algum texto), ele aparecerá no local exato que você o especificar mesmo quando o internauta minimiza a tela do browser. Os blocos de posições absoluta podem se sobrepor e a hierarquia de sobreposição obedece aquela apresentada no código-fonte, isso é, os objetos definidos por último irão sobrepor os anteriores. Abaixo segue um exemplo prático de como isso acontece.  Bloco vermelho  Bloco azul  Bloco verde <DIV STYLE="background-color: #CC0000; position: absolute; left: 200px; top: 810px; height: 50px; width: 200px;">  Bloco vermelho</DIV> <DIV STYLE="background-color: #007FFF; position: absolute; left: 300px; top: 830px; height: 50px; width: 200px;">  Bloco azul</DIV> <DIV STYLE="background-color: #238E23; position: absolute; left: 400px; top: 850px; height: 50px; width: 200px;">  Bloco verde</DIV>       Agora invertendo as posições dos blocos vermelho e azul:  Bloco azul  Bloco vermelho  Bloco verde <DIV STYLE="background-color: #007FFF; position: absolute; left: 300px; top: 1130px; height: 50px; width: 200px">  Bloco azul</DIV> <DIV STYLE="background-color: #CC0000; position: absolute; left: 200px; top: 1150px; height: 50px; width: 200px">  Bloco vermelho</DIV> <DIV STYLE="background-color: #238E23; position: absolute; left: 400px; top: 1170px; height: 50px; width: 200px">  Bloco verde</DIV>       Repare também que para apresentar o segundo exemplo acima tive que alterar as propriedades left & top dos três blocos para que o exemplo fosse deslocado mais para baixo na tela.   POSIÇÃO RELATIVA Agora vou apresentar os mesmos exemplos porém mudando a configuração de absolute para relative. Como já disse na posição relativa o objeto irá ocupar o próximo espaço disponível abaixo do último objeto. Porém, como estou usando três blocos como exemplo, existe alguns peculiaridades interessantes que preciso explicar:  Bloco vermelho  Bloco azul  Bloco verde <DIV STYLE="background-color: #CC0000; position: relative; left:200px; top:10px; height: 50px; width: 200px;">  Bloco vermelho</DIV> <DIV STYLE="background-color: #007FFF; position: relative; left:300px; top:10px; height: 50px; width: 200px;">  Bloco azul</DIV> <DIV STYLE="background-color: #238E23; position: relative; left: 400px; top:-20px; height: 50px; width: 200px;">  Bloco verde</DIV> O top do bloco vermelho está a 10px abaixo do texto, já o top do bloco azul também deveria estar a 10px abaixo do texto (sobrepondo a metade direita do bloco vermelho), porém sua distância não corresponde com o que vemos. Isso porque relative contabiliza a distância do texto mais a altura (height) do bloco anterior. Então ele irá contar 10px + 50px = 60px abaixo do texto. Para sobrepo-los temos que inserir valores negativos em top. Observe que o bloco verde possui top:-20px, então ele irá subir 30px para dentro do bloco azul (pois além do bloco verde não ter os 10px, ele possui -20px totalizando -30px). A equação ficaria assim: 10 + 50 + 50 +[-20 -(+10)] = 80px. Isso quer dizer que o bloco verde com top=-20px está 80px abaixo do texto. Isso parece deverasmente complicado... Qual seria a utilidade de relative funcionar assim? Bom, uma das utilidades que encontrei foi que para posicionar um objeto no meio ou final de arquivos HTML relativamente longos, não precisamos ficar calculando sua posição vertical, relative já o colocaria diretamente no local disponível mais próximo. Agora sobre a razão dele funcionar assim só o W3C (Consórcio Internacional que padroniza os protocolos e linguagens utilizadas na Web) saberá responder.   POSIÇÃO ESTÁTICA A posição estática irá inserir o objeto no espaço disponível mais próximo sem nenhuma característica especial aplicada a ele, isso é, ele irá ocupar o primeiro canto superior esquerdo, conforme você está vendo abaixo independente de você inserir valores em left e top.  Bloco vermelho  Bloco azul  Bloco verde <DIV STYLE="background-color: #CC0000; position: static; left:200px; top:10px; height: 50px; width: 200px;">  Bloco vermelho</DIV> <DIV STYLE="background-color: #007FFF; position: static; left:300px; top:10px; height: 50px; width: 200px;">  Bloco azul</DIV> <DIV STYLE="background-color: #238E23; position: static; left: 400px; top:-20px; height: 50px; width: 200px;">  Bloco verde</DIV> Observe que em static as propriedades left & top são ignoradas. Mas se os browseres já possuem esta condição (canto superior esquerdo) como default para posicionar qualquer objeto, então qual seria a aplicação prática para static? Humm!... Ainda não descobri mas, sem dúvida, ela deve existir.   A propriedade z-index define uma hierarquia de sobreposição de objetos independente da seu alinhamento sintático. Os valores de z-index são sempre inteiros e o objeto que tiver o maior valor irá sobrepor os demais. Essa norma é usada tanto para o posicionamento absoluto como para o relativo. Sintaxe do exemplo da esquerda <DIV STYLE="position: absolute; left: 300px; top: 2810px; z-index:1"> <IMG SRC="imagens/elefante.gif"></DIV> <DIV STYLE="position: absolute; left: 320px; top: 2810px; z-index:2"> <IMG SRC="imagens/galo.gif"></DIV>           Sintaxe do exemplo da direita <DIV STYLE="position: absolute; left: 300px; top: 2810px; z-index:2"> <IMG SRC="imagens/elefante.gif"></DIV> <DIV STYLE="position: absolute; left: 320px; top: 2810px; z-index:1"> <IMG SRC="imagens/galo.gif"></DIV> Repare que embora o alinhamento sintático das figuras permaneça o mesmo, a sobreposição das figura se alteraram.   A propriedade overflow é aplicada sobre um texto que extrapolou o tamanho do bloco definido por width e height. Seus valores são: visible - Onde será mostrado todo o conteúdo da caixa. hidden - Onde não será mostrado o conteúdo que ficar fora dos limites da caixa. auto - O browser manterá o tamanho do bloco e mostrará uma barra de rolagem, caso seja necessário. scroll - O browser sempre mostrará uma barra de rolagem, mesmo que não seja necessário. Exemplo: <DIV STYLE="overflow:scroll; width:400px; height:80px; background-color:#ffc0cb"> Este texto está configurado com overflow:scroll e irá aparecer dentro de um quadro com barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessárias. </DIV> Este texto está configurado com overflow:scroll e irá aparecer dentro de um quadro com barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessárias. <DIV STYLE="overflow:visible; width:300px; height:80px; background-color:#ffc0cb"> Este texto está configurado com overflow:visible e irá aparecer dentro de um quadro sem barras de rolagem. </DIV> Este texto está configurado com overflow:visible e irá aparecer dentro de um quadro sem barras de rolagem.

Esta seção encontra-se em estudo ainda.