Posicionamento absoluto de elementos em CSS

Nesta lição, vamos analisar o posicionamento absoluto de elementos. Ele permite posicionar elementos por coordenadas especificadas da página. Por exemplo, é possível posicionar um elemento na posição 100px do topo da página e 200px da esquerda. O elemento se moverá para lá, independentemente do que estiver posicionado no local e simplesmente ficará sobre os outros. Diz-se que, assim, o elemento sai do fluxo normal do documento: todos os outros elementos se comportarão como se o nosso elemento não existisse.

Para tornar um elemento posicionado absolutamente, é necessário definir para esse elemento a propriedade position com o valor absolute. Além desta propriedade, são necessárias mais duas: uma definirá a coordenada vertical e a outra - a horizontal.

Para a vertical, é necessário definir uma margem no topo ou na parte inferior. A margem superior é definida pela propriedade top, e a margem inferior - pela propriedade bottom. Para a horizontal, é necessário definir uma margem à esquerda ou à direita. A margem esquerda é definida pela propriedade left, e a margem direita - pela propriedade right.

Vamos ver exemplos.

Exemplo

Para começar, vamos simplesmente criar dois blocos sem posicionamento (preste atenção ao fato de que os elementos não estão colados à borda da janela, pois o body tem margin por padrão):

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemplo

Agora vamos definir posicionamento absoluto para o bloco verde, posicionando-o em 150px do topo e 100px da esquerda:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemplo

Agora vamos posicionar o bloco verde em 0px do topo e 0px da esquerda:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemplo

Agora vamos posicionar o bloco verde em 0px do topo e 0px da direita:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemplo

Agora vamos posicionar o bloco verde em 0px da parte inferior e 0px da direita:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Exemplo

Agora vamos posicionar o bloco verde em 0px da parte inferior e 0px da esquerda:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Tarefas práticas