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):

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

#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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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

Usando posicionamento absoluto, posicione os blocos da seguinte forma: