Como Criar Sites | Aprenda grátis como fazer seu site

Um estilo que eu uso muito é o position, ele me permite colocar um elemento exatamente onde eu quero no documento html. Vou explicar a diferença dos valores possíveis do estilo position (static, relative e absolute) e dar um exemplo de funcionamento. Existe um outro valor posível para o estilo position que é o fixed, mas ele só funciona no Internet Explorer e não deve ser utilizado.

Style Position: Static

Static é o valor padrão do estilo position dos elementos de um documento html. Se você não definir o estilo position, ele será static. Esse static quer dizer que o elemento será renderizado no navegador de acordo com o local onde ele está no código, seguindo o fluxo padrão da página. Com valor static do estilo position, o elemento não segue estilo como left, right, top e bottom.

Exemplo de Position Static:

<table>
	<tr>
		<td>
		<span>normal position (static)</span>
		<span style="position: static; top: 30px; left: 80px;">Position Static.</span>
		</td>
	</tr>
</table>

Style Position: Relative

Quando um estilo (style) está em relative, o valor da posição normal do elemento é adicionada a qualquer valor de estilos left, right, top e bottom. Isso quer dizer que se o elemento é renderizado normal na posição 100 x 100, e você colocar estilo left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 130 pixels para esquerda (left) e 150 pixels do topo (top).

Exemplo de Position Relative:

<table>
	<tr>
		<td>
		<span>normal position (relative)</span>
		<span style="position: relative; top: 50px; left: 100px;">Position Relative.</span>
		</td>
	</tr>
</table>

Style Position: Absolute

Quando um elemento está com o estilo position com valor absolute, ele será posicionado exatamente nos pixels que os estilos left, right, top e bottom definirem. Se um elemento com position absolute está na posição 100 x 100, e é colocado os estilos left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 30 pixels da esquerda (left) e 50 pixels do topo (top).

Exemplo de Position Absolute:

<table>
	<tr>
		<td>
		<span>normal position (absolute)</span>
		<span style="position: absolute; top: 30px; left: 80px;">Position Absolute.</span>
		</td>
	</tr>
</table>

Para você vizualizar os exemplos acima bem, coloque-os todo em um mesmo documento html e verifique o que cada um faz com o texto deles.

Para um guia completo de CSS (Cascading Style Sheets):

http://www.w3schools.com/CSS/default.asp