Alinhamento CSS - Propriedade position

position A propriedade define o tipo do método de alinhamento do elemento (statico, relativo, fixo, absoluto ou sticky).

propriedade position

position A propriedade define o tipo de método de alinhamento aplicado ao elemento.

Existem cinco valores de posição diferentes:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Os elementos realmente usam os atributos top, bottom, left e right para alinhar. No entanto, a menos que o atributo position seja definido primeiro, esses atributos não terão efeito. O modo de funcionamento desses atributos também é diferente dependendo do valor de position.

position: static;

Os elementos HTML têm o alinhamento padrão como static (estático).

Os elementos alinhados estáticos não são afetados pelos atributos top, bottom, left e right.

Os elementos com position: static; não são alinhados de maneira especial; eles sempre são alinhados conforme o fluxo normal da página:

Este elemento <div> definiu position: static;

Este é o CSS utilizado:

Exemplo

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Experimente você mesmo

position: relative;

position: relative; Os elementos são alinhados em relação à sua posição normal.

A definição dos atributos top, right, bottom e left de um elemento alinhado relativo causará sua desvio da posição normal para ajuste. Não será ajustado o restante do conteúdo para se adaptar ao espaço deixado pelo elemento.

Este elemento <div> definiu position: relative;

Este é o CSS utilizado:

Exemplo

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Experimente você mesmo

position: fixed;

position: fixed; Os elementos alinhados são em relação à visualização, o que significa que, mesmo se a página for rolada, eles sempre ficam na mesma posição. Os atributos top, right, bottom e left são usados para alinhar este elemento.

Os elementos alinhados fixamente não deixam espaços em branco no local onde normalmente deveriam estar na página.

Observe este elemento fixo no canto inferior direito da página. Este é o CSS utilizado:

Exemplo

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Experimente você mesmo

Este elemento <div> definiu position: fixed;

position: absolute;

position: absolute; Os elementos são alinhados em relação ao ancestral alinhado mais próximo (em vez de serem alinhados em relação à visualização, como fixed).

No entanto, se o elemento absolutamente alinhado não tiver ancestral, ele usará o corpo do documento (body) e se moverá com a rolagem da página.

Atenção:Os elementos 'alinhados' são aqueles cuja posição exceto static qualquer outro elemento.

Este é um exemplo simples:

Este elemento <div> definiu position: relative;
Este elemento <div> definiu position: absolute;

Este é o CSS utilizado:

Exemplo

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Experimente você mesmo

position: sticky;

position: sticky; os elementos são alinhados com base na posição de rolagem do usuário.

Os elementos adesivos são alinhados com base na posição de rolagem do usuário no (relative) e fixo (fixed) entre si. No início, ele será alinhado de forma relativa, até encontrar a posição desejada na viewport - então será 'colado' na posição apropriada (por exemplo, position:fixed).

Atenção:O Internet Explorer, o Edge 15 e as versões anteriores não suportam alinhamento adesivo. O Safari requer o préfixo -webkit- (veja o exemplo a seguir). Você também deve especificar pelo menos top,right,bottom ou left um dos quais, para que o alinhamento adesivo funcione.

Neste exemplo, quando o elemento sticky atingir sua posição de rolagem, ele ficará na parte superior da página (top: 0)

Exemplo

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Experimente você mesmo

Elementos sobrepostos

Quando se alinha elementos, eles podem se sobrepor a outros elementos.

z-index A propriedade especifica a ordem de empilhamento do elemento (qual elemento deve ser colocado à frente ou atrás de outro).

Os elementos podem definir uma ordem de empilhamento positiva ou negativa:

Este é um título

Devido ao z-index do imagem ser -1, ele fica atrás do texto.

Exemplo

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Experimente você mesmo

Os elementos com uma ordem de empilhamento mais alta sempre ficam à frente dos elementos com uma ordem de empilhamento mais baixa.

Atenção:Se dois elementos alinhados se sobrepondo não forem especificados z-indexentão o último elemento presente no código HTML será exibido no topo.

Posicionar texto dentro da imagem

Como colocar texto em uma imagem:

Exemplo

Logo do CodeW3C.com
Canto inferior esquerdo
Canto superior esquerdo
Canto superior direito
Canto inferior direito
Centralizado

Experimente você mesmo:

Canto superior esquerdo Canto superior direito Canto inferior esquerdo Canto inferior direito Centralizado

Mais exemplos

Definir a forma do elemento
Este exemplo demonstra como definir a forma do elemento. O elemento é cortado para essa forma e exibido.

Todos os atributos de alinhamento CSS

Atributo Descrição
bottom Definir a margem externa inferior do retângulo de alinhamento.
clip Cortar elementos de alinhamento absoluto.
left Definir a margem externa esquerda da caixa de alinhamento.
position Determinar o tipo de alinhamento do elemento.
right Definir a margem externa direita da caixa de alinhamento.
top Definir a margem externa superior da caixa de alinhamento.
z-index Definir a ordem de empilhamento do elemento.

Leitura adicional

Livro extra:Resumo de alinhamento CSS

Livro extra:Alinhamento relativo CSS

Livro extra:Alinhamento absoluto CSS