Alinhamento do CSS

A propriedade de alinhamento do CSS (Positioning) permite que você alinhe elementos.

CSS Alinhamento e Flutuabilidade

O CSS fornece algumas propriedades para alinhamento e flutuabilidade, que permitem criar layouts em coluna, sobrepor parte do layout a outra parte e completar tarefas que, durante muitos anos, geralmente precisavam de várias tabelas para serem realizadas.

A ideia básica da alinhamento é simples, permitindo que você defina a posição da caixa do elemento em relação à sua posição normal, ou em relação ao elemento pai, a outro elemento ou até mesmo à janela do navegador. Obviamente, essa função é muito poderosa e também muito surpreendente. Para saber, a suporte do agente de usuário ao alinhamento no CSS2 é muito superior ao de outros aspectos, e isso não deve ser surpreendente.

Por outro lado, o CSS1 introduziu pela primeira vez a flutuabilidade, baseada em uma funcionalidade adicionada pelo Netscape no início do desenvolvimento da Web. A flutuabilidade não é completamente de alinhamento, no entanto, evidentemente também não é layout de fluxo normal. Vamos esclarecer o significado da flutuabilidade em capítulos posteriores.

Tudo é uma caixa

Os elementos div, h1 ou p são frequentemente chamados de elementos de bloco. Isso significa que esses elementos são exibidos comoUm bloco de conteúdoou seja, 'caixa de bloco'. Em contraste, elementos como span e strong são chamados de 'elementos inline', pois seu conteúdo é exibido na linha, ou seja, na 'caixa de linha inline'.

Você pode usar Propriedade displayMudar o tipo da caixa gerada. Isso significa que, ao definir a propriedade display como block, é possível fazer com que o elemento inline (como o elemento <a>) se comporte como um elemento de bloco. Além disso, ao definir display como none, o elemento gerado não terá caixa. Dessa forma, a caixa e todo o seu conteúdo não serão exibidos e não ocuparão espaço no documento.

Mas em uma situação, mesmo sem definição explícita, é criado um elemento de bloco. Essa situação ocorre quando alguns textos são adicionados ao início de um elemento de bloco (como div). Mesmo que esses textos não sejam definidos como parágrafos, eles serão tratados como parágrafos:

<div>
algum texto
<p>Mais texto.</p>
</div>

Neste caso, essa caixa é chamada de caixa anônima, pois não está associada a um elemento definido especificamente.

O texto da linha do elemento de bloco também ocorre um fenômeno semelhante. Suponha que haja um parágrafo contendo três linhas de texto. Cada linha de texto forma uma caixa anônima. Não é possível aplicar estilos diretamente às caixas anônimas ou às caixas de linha, pois não há lugar para aplicar estilos (observe que a caixa de linha e a caixa de linha inline são conceitos diferentes). No entanto, isso ajuda a entender que tudo o que vemos na tela forma algum tipo de caixa.

Mecanismo de alinhamento do CSS

O CSS possui três mecanismos básicos de alinhamento: fluxo normal, flutuante e alinhamento absoluto.

A menos que especificado especialmente, todas as caixas são posicionadas no fluxo normal. Isso significa que a posição dos elementos no fluxo normal é determinada pela posição do elemento no (X)HTML.

As caixas de bloco são alinhadas uma após a outra de cima para baixo, e a distância vertical entre as caixas é calculada com base na margem vertical externa.

As caixas de linha inline são alinhadas horizontalmente em uma linha. Pode-se ajustar o espaçamento entre elas usando margem interna horizontal, borda e margem externa. No entanto, a margem interna vertical, a borda e a margem externa não afetam a altura da caixa de linha inline. A caixa horizontal formada por uma linha é chamada deCaixa de linha (Line Box)A altura da caixa de linha é sempre suficiente para conter todas as caixas de linha inline contidas dentro dela. No entanto, ajustar a altura da linha pode aumentar a altura dessa caixa.

Nos capítulos seguintes, explicaremos detalhadamente a alinhamento relativo, alinhamento absoluto e flutuante para você.

Propriedade position CSS

Ao usar Propriedade positionPodemos escolher 4 tipos diferentes de alinhamento, que afetam a forma de geração da caixa do elemento.

O significado do valor da propriedade position:

static
O retângulo do elemento é gerado normalmente. O elemento de bloco gera um retângulo, que faz parte do fluxo do documento, enquanto que o elemento de linha cria uma ou mais caixas de linha, colocadas dentro do elemento pai.
relative
O bloco de elementos desloca-se uma certa distância. Ele mantém a forma original, e o espaço que ele ocupava originalmente é mantido.
absolute
O bloco de elementos é removido completamente do fluxo do documento e posicionado em relação ao bloco contido. O bloco contido pode ser outro elemento no documento ou o bloco contido inicial. O espaço ocupado pelo elemento original no fluxo normal do documento será fechado, como se o elemento original não existisse. Após a locação do elemento, é gerado um bloco de nível, independentemente do tipo de bloco gerado pelo elemento no fluxo normal.
fixed
A performance do bloco de elementos é semelhante à configuração de position como absolute, mas o bloco contido é a janela de visualização em si.

Dica:O posicionamento relativo é considerado parte do modelo de posicionamento comum, porque a posição do elemento é relativa à sua posição no fluxo comum.

Exemplo

Posicionamento: Posicionamento relativo
Este exemplo demonstra como posicionar elementos em relação à posição normal do elemento.
Posicionamento: Posicionamento absoluto
Este exemplo demonstra como usar valores absolutos para posicionar elementos.
Posicionamento: Posicionamento fixo
Este exemplo demonstra como posicionar elementos em relação à janela do navegador.
Usar valor fixo para definir a margem superior da imagem
Este exemplo demonstra como usar valores fixos para definir a margem superior da imagem.
Usar porcentagem para definir a margem superior da imagem
Este exemplo demonstra como usar porcentagens para definir a margem superior da imagem.
Usar valor em pixels para definir a margem inferior da imagem
Este exemplo demonstra como usar valores em pixels para definir a margem inferior da imagem.
Usar porcentagem para definir a margem inferior da imagem
Este exemplo demonstra como usar porcentagens para definir a margem inferior da imagem.
Usar valor fixo para definir a margem esquerda da imagem
Este exemplo demonstra como usar valores fixos para definir a margem esquerda da imagem.
Usar porcentagem para definir a margem esquerda da imagem
Este exemplo demonstra como usar porcentagens para definir a margem esquerda da imagem.
Usar valor fixo para definir a margem direita da imagem
Este exemplo demonstra como usar valores fixos para definir a margem direita da imagem.
Usar porcentagem para definir a margem direita da imagem
Este exemplo demonstra como usar porcentagens para definir a margem direita da imagem.
Como usar a barra de rolagem para exibir o conteúdo excedente dentro do elemento
Este exemplo demonstra como configurar a propriedade overflow para definir a ação correspondente quando o conteúdo do elemento é maior do que a área especificada.
Como ocultar o conteúdo excedente de um elemento de excesso
Este exemplo demonstra como configurar a propriedade overflow para ocultar o conteúdo quando o conteúdo do elemento é maior do que a área especificada.
Como configurar o navegador para lidar automaticamente com o excesso de conteúdo
Este exemplo demonstra como configurar o navegador para lidar automaticamente com o excesso de conteúdo.
Definir a forma do elemento
Este exemplo demonstra como definir a forma de um elemento. Este elemento é recortado dentro dessa forma e exibido.
Alinhar verticalmente imagens
Este exemplo demonstra como alinhar verticalmente imagens no texto.
Z-index
O Z-index pode ser usado para posicionar um elemento após outro.
Z-index
No exemplo acima, o elemento já foi alterado o Z-index.

Propriedades de Posicionamento CSS

As propriedades de posicionamento CSS permitem que você posicione elementos.

Propriedade Descrição
position Coloca o elemento em uma posição estática, relativa, absoluta ou fixa.
top Define o deslocamento da margem superior externa do elemento de posicionamento em relação à margem superior do bloco que contém.
right Define o deslocamento da margem direita externa do elemento de posicionamento em relação à margem direita do bloco que contém.
bottom Define o deslocamento da margem inferior externa do elemento de posicionamento em relação à margem inferior do bloco que contém.
left Define o deslocamento da margem externa esquerda do elemento de posicionamento em relação à margem esquerda do bloco que contém.
overflow Definir o que acontece quando o conteúdo do elemento transborda sua área.
clip Definir a forma do elemento. O elemento é cortado dentro dessa forma e então exibido.
vertical-align Definir o modo de alinhamento vertical do elemento.
z-index Definir a ordem de empilhamento do elemento.