CSS que posiciona propriedades

Agora todos os projetos a ser feitos inteiramente no CSS que requereu previamente o uso de mapas do Javascript ou de imagem do HTML. É não somente mais fácil codificar, mas carrega também muito mais rapidamente!

Posicionar o parente

A posição do elemento do HTML muda relativo a onde parece normalmente usando posicionar relativo.
Nós poderíamos usar posicionar relativo para movê-la um bocado para a direita e para tragar um par dos pixels, se nós tivéssemos um encabeçamento que aparecesse no alto de nossa página.

Código do CSS

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}

Usando somente dois (deixados e superiores), você observou provavelmente que você define os quatro sentidos possíveis (à esquerda, para a direita, acima de, e para baixo). Está aqui uma referência rápida ao mover elementos do HTML no CSS.

Movimento deixado - usar um valor negativo para a esquerda.
Direita do movimento - usar um valor positivo para a esquerda.
Mover para cima - usar um valor negativo para o alto.
Abaixar - usar um valor positivo para o alto.

Posicionar o Absolute

Você define o valor exato do pixel onde o elemento especificado do HTML parecerá usando posicionar absoluto.
Ser assim certo que você está medindo do alto-esquerdo da área viewable do browser.
Nota: Firefox não interpreta atualmente o absolute que posiciona corretamente. Entretanto o IE 6.0+ e a ópera 8.0+.

Código do CSS

h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}

O seguinte exemplo demonstra como ajustar a forma de um elemento

Código do CSS

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>

</html>

A tabela follwing descreve as propriedades posicionando:

Property	Description	values
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length
clip	Sets the shape of an element .The element is clipped into this shape, and displayed	shape auto
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length
top	Sets how far the top edge of an element is to the left/right of the right edge of the parent element	auto % length
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom % length
z-index	Sets the stack order of an element	auto number