Noções básicas de CSS: posição e flutuação

CSS fornece propriedades de posicionamento e flutuação que permitem criar layouts colunares, sobrepor uma parte de um layout a outra e realizar tarefas que durante anos frequentemente exigiam o uso de múltiplas tabelas.
A ideia básica de posicionamento é simples, permite definir onde a caixa de um elemento deve aparecer em relação à sua posição normal, ou em relação a um elemento pai, outro elemento ou até mesmo a própria janela do navegador. Obviamente, esse recurso é muito poderoso e surpreendente. Não deveria ser surpresa saber que os agentes de usuário suportam o posicionamento em CSS2 muito melhor do que outros aspectos.
Os floats, por outro lado, foram introduzidos pela primeira vez no CSS1 e foram baseados em um recurso adicionado pela Netscape nos primórdios da Web. Flutuar não é exatamente posicionamento, mas certamente também não é um layout de fluxo normal. Esclareceremos o significado de float em um capítulo posterior.

tudo é uma moldura

Um elemento div, h1 ou p costuma ser chamado de elemento de nível de bloco. Isso significa que esses elementos aparecem como um bloco de conteúdo, uma “caixa de bloco”. Por outro lado, elementos como span e strong são chamados de “elementos embutidos” porque seu conteúdo aparece dentro de uma linha, uma “caixa embutida”.
Você pode alterar o tipo de caixa gerada usando a propriedade display. Isso significa que você pode fazer com que elementos inline (como elementos <a>) se comportem como elementos em nível de bloco, definindo a propriedade display como block. Você também pode definir a exibição como nenhuma para que o elemento gerado não tenha nenhuma caixa. Desta forma, a caixa e todo o seu conteúdo deixam de ficar visíveis e não ocupam espaço no documento.
Mas em um caso, os elementos em nível de bloco são criados mesmo sem definição explícita. Isso acontece quando você adiciona algum texto ao início de um elemento de nível de bloco (como um div). Mesmo que o texto não seja definido como parágrafo, será tratado como tal:


Nesse caso, a caixa é chamada de caixa de bloco sem nome porque não está associada a um elemento especificamente definido.
Algo semelhante acontece com linhas de texto para elementos de nível de bloco. Suponha que você tenha um parágrafo contendo três linhas de texto. Cada linha de texto forma uma caixa sem nome. Você não pode aplicar estilos diretamente a blocos sem nome ou caixas de linha porque não há lugar para aplicar estilos (observe que caixas de linha e caixas embutidas são dois conceitos diferentes). Porém, ajuda entender que tudo que você vê na tela forma uma espécie de caixa.

Mecanismo de posicionamento CSS

CSS possui três mecanismos básicos de posicionamento: fluxo normal, flutuação e posicionamento absoluto.
Todas as caixas são posicionadas no fluxo normal, salvo indicação em contrário. Ou seja, a posição de um elemento em um fluxo normal é determinada pela posição do elemento em X(HTML).
As caixas em nível de bloco são organizadas uma após a outra, de cima para baixo, e a distância vertical entre as caixas é calculada a partir das margens verticais das caixas.
As caixas embutidas são organizadas horizontalmente em uma linha. Seu espaçamento pode ser ajustado usando preenchimento horizontal, bordas e margens. No entanto, o preenchimento vertical, as bordas e as margens não afetam a altura da caixa embutida. A caixa horizontal formada por uma linha é chamada de caixa de linha. A altura de uma caixa de linha é sempre alta o suficiente para acomodar todas as caixas embutidas que ela contém. No entanto, definir a altura da linha pode aumentar a altura desta caixa.
Abaixo, explicaremos em detalhes o posicionamento relativo, o posicionamento absoluto e a flutuação.

Propriedade de posição CSS

Utilizando a propriedade position podemos escolher entre 4 tipos diferentes de posicionamento, o que afeta a forma como a caixa do elemento é gerada.
O significado do valor do atributo de posição:
estático
A caixa do elemento é gerada normalmente. Os elementos em nível de bloco criam uma caixa retangular como parte do fluxo do documento, enquanto os elementos embutidos criam uma ou mais caixas de linha que são colocadas em seu elemento pai.
relativo
A caixa do elemento é deslocada por uma certa distância. O elemento mantém a sua forma não posicionada e o espaço que ocupava originalmente.
absoluto
A caixa do elemento é completamente removida do fluxo do documento e posicionada em relação ao bloco que a contém. O bloco que contém pode ser outro elemento no documento ou o bloco que contém inicial. O espaço anteriormente ocupado pelo elemento no fluxo normal do documento é fechado, como se o elemento não existisse. O elemento gera uma caixa em nível de bloco após o posicionamento, independentemente do tipo de caixa que ele gerou originalmente no fluxo normal.
fixo
A caixa do elemento se comporta como definir a posição como absoluta, exceto que o bloco que a contém é a própria janela de visualização.
Dica: O posicionamento relativo é, na verdade, considerado parte do modelo de posicionamento de fluxo normal, porque a posição de um elemento é relativa à sua posição no fluxo normal.

Propriedades de posicionamento CSS

As propriedades de posicionamento CSS permitem posicionar elementos.
Descrição do imóvel
position coloca o elemento em uma posição estática, relativa, absoluta ou fixa.
top define o deslocamento entre o limite da margem superior de um elemento posicionado e o limite superior do bloco que o contém.
right define o deslocamento entre a borda da margem direita do elemento posicionado e a borda direita do bloco que o contém.
bottom define o deslocamento entre o limite da margem inferior do elemento posicionado e o limite inferior do bloco que o contém.
left define o deslocamento entre a borda da margem esquerda do elemento posicionado e a borda esquerda do bloco que o contém.
overflow define o que acontece quando o conteúdo de um elemento ultrapassa sua área.
clip define a forma do elemento. O elemento é recortado nesta forma e então exibido.
vertical-align define o alinhamento vertical de um elemento.
índice z define a ordem de empilhamento dos elementos.