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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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
Dados os seguintes blocos:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#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;
}
:
Desloque esses blocos usando posicionamento relativo da seguinte forma:
