Posicionamento relativo de elementos em CSS

O posicionamento relativo é definido com o valor relative para a propriedade position. Esse tipo de posicionamento permite deslocar elementos em relação à sua posição atual em uma determinada magnitude. Ao mesmo tempo, todos os outros elementos da página vão se comportar como se o elemento ainda estivesse na posição original. Ou seja, com esse tipo de posicionamento, o elemento não sai do fluxo normal.

Os deslocamentos da posição atual são definidos pelas propriedades top, right, bottom e left.

Exemplo

Para começar, vamos simplesmente criar dois blocos sem posicionamento:

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

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

Результат:

Exemplo

Agora, vamos adicionar relative ao primeiro bloco. Nada mudará por enquanto, porque não especificamos o deslocamento do bloco:

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

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

Результат:

Exemplo

Agora, vamos afastar nosso bloco em 30px do topo, definindo a propriedade top. Enquanto isso, todos os outros elementos se comportarão como se nosso bloco ainda estivesse no lugar original:

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

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

Результат:

Exemplo

Vamos também afastar nosso bloco em 40px da esquerda, definindo a propriedade left:

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

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

Результат:

Exemplo

Valores negativos para as propriedades top, right, bottom e left deslocam na direção oposta. Por exemplo, um valor positivo para top desloca para baixo, e um negativo - para cima.

Vamos afastar nosso segundo bloco em 40px para cima, definindo um valor negativo para a propriedade top:

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

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Tarefas práticas

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

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}