Propriedade position

A propriedade position define o método de posicionamento dos elementos. Esta propriedade é mais frequentemente usada em conjunto com as propriedades top, right, bottom, left, que definem as margens superior, direita, inferior e esquerda, respectivamente.

Sintaxe

seletor {
	position: absolute | relative | fixed | static | sticky;
}

Valores para position

Valor	Descrição
`absolute`	Posicionamento absoluto. O elemento é removido do fluxo normal do documento e posicionado em relação ao ancestral posicionado mais próximo (se houver) ou em relação à janela do navegador.
`relative`	Posicionamento relativo. O elemento é deslocado em relação à sua posição normal no fluxo do documento, mas o espaço que ele ocupava permanece reservado.
`fixed`	Posicionamento fixo. O elemento é removido do fluxo normal do documento e posicionado em relação à janela do navegador. Permanece no lugar durante a rolagem da página.
`static`	Posicionamento estático. O valor significa a ausência de posicionamento e o elemento se comporta normalmente.
`sticky`	Posicionamento aderente (sticky). O elemento se comporta como `relative` até atingir uma posição especificada durante a rolagem, após a qual ele gruda no local especificado (como `fixed`).

Valor padrão: static.

Exemplo . Posicionamento absoluto

Vamos posicionar o elemento no canto superior esquerdo da tela com pequenas margens:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplo . Posicionamento absoluto

Agora vamos posicionar o elemento no canto superior direito da tela com pequenas margens:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplo . Posicionamento fixo

Com posicionamento fixo, o elemento permanecerá no lugar durante a rolagem:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplo . Posicionamento relativo

Com posicionamento relativo, o elemento é deslocado em relação à sua posição normal, mas os outros elementos se comportam como se o elemento não tivesse sido deslocado:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Exemplo . Aninhamento

Se o elemento pai tiver a propriedade position com o valor relative, então os elementos com posicionamento absoluto serão posicionados em relação ao pai:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplo . Aninhamento

Se o elemento pai tiver a propriedade position com o valor absolute, então os elementos com posicionamento absoluto serão posicionados em relação ao pai:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplo . Posicionamento aderente (sticky)

Se um elemento tiver a propriedade position com o valor sticky, então o elemento se comporta como relative até atingir uma posição especificada durante a rolagem, após a qual gruda no local. Vamos criar um cabeçalho aderente (sticky):

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Exemplo . Sem posição

Se um elemento receber posicionamento absoluto sem especificar a posição, o elemento permanecerá no local onde estava sem o posicionamento, mas os outros elementos deixarão de levá-lo em consideração:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplo . Um eixo

No posicionamento absoluto, você pode definir a posição apenas em um eixo. Por exemplo, se definirmos a propriedade top, na vertical o elemento assumirá a posição correta, e na horizontal permanecerá onde estava:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplo . Todas as posições

No posicionamento absoluto, você pode definir posições em todos os lados, sem definir largura e altura. Neste caso, o elemento ficará centralizado no bloco pai:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Veja também

a propriedade z-index,
que define a sobreposição de elementos