3.1 position: relative
O posicionamento relativo no CSS permite que os elementos se movam em relação à sua posição original no fluxo do documento.
Ao usar position: relative, o elemento mantém seu lugar no fluxo normal, mas pode ser deslocado usando as propriedades
top, right, bottom e left. Essas propriedades permitem deslocar o elemento em relação à sua posição normal.
Principais conceitos de posicionamento relativo
No posicionamento relativo (position: relative), o elemento é movido de sua posição original no fluxo do documento.
Esse deslocamento afeta somente o próprio elemento, enquanto os outros elementos permanecem em seus lugares,
como se o elemento não tivesse sido movido. Isso permite criar efeitos onde os elementos se sobrepõem
ou criam espaçamentos visuais adicionais.
Sintaxe:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Onde:
top: move o elemento para baixo em relação à sua posição normalright: move o elemento para a esquerda em relação à sua posição normalbottom: move o elemento para cima em relação à sua posição normalleft: move o elemento para a direita em relação à sua posição normal<valor>: pode ser qualquer valor de comprimento válido no CSS (px,%,em, etc.)
3.2 Propriedade top
A propriedade top desloca o elemento para baixo em relação à sua posição original.
Exemplo de uso de top:
.relative-top {
position: relative;
top: 20px; /* Desloca o elemento 20 pixels para baixo */
}
Exemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Este é um bloco normal</div>
<div class="box relative-top">Este bloco será deslocado para baixo em 20px.</div>
<div class="box static-box">Este é um bloco normal</div>
</div>
3.3 Propriedade right
A propriedade right desloca o elemento para a esquerda em relação à sua posição original.
Exemplo de uso de right:
.relative-right {
position: relative;
right: 20px; /* Desloca o elemento 20 pixels para a esquerda */
}
Exemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Este é um bloco normal</div>
<div class="box relative-right">Este bloco será deslocado para a esquerda em 20px.</div>
<div class="box static-box">Este é um bloco normal</div>
</div>
3.4 Propriedade bottom
A propriedade bottom desloca o elemento para cima em relação à sua posição original.
Exemplo de uso de bottom:
.relative-bottom {
position: relative;
bottom: 20px; /* Desloca o elemento 20 pixels para cima */
}
Exemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Este é um bloco normal</div>
<div class="box relative-bottom">Este bloco será deslocado para cima em 20px.</div>
<div class="box static-box">Este é um bloco normal</div>
</div>
3.5 Propriedade left
A propriedade left desloca o elemento para a direita em relação à sua posição original.
Exemplo de uso de left:
.relative-left {
position: relative;
left: 20px; /* Desloca o elemento 20 pixels para a direita */
}
Exemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Este é um bloco normal</div>
<div class="box relative-left">Este bloco será deslocado para a direita em 20px.</div>
<div class="box static-box">Este é um bloco normal</div>
</div>
3.6 Interação com elementos adjacentes
Elementos com position: relative permanecem no fluxo normal do documento, o que significa que
eles continuam ocupando o espaço que ocupariam se não tivessem sido deslocados.
Isso permite deslocar elementos sem alterar a localização de outros elementos na página.
Exemplo de uso:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Elemento 1 (deslocado para baixo)</div>
<div class="box box2">Elemento 2 (deslocado para a direita)</div>
<div class="box">Elemento 3 (posição normal)</div>
</div>
Explicação do código:
-
.box1: elemento deslocado para baixo em 20 pixels, mas seu lugar no fluxo normal permanece, o que significa que outros elementos vão se posicionar em relação à sua posição original -
.box2: elemento deslocado para a direita em 20 pixels, mas seu lugar no fluxo normal permanece
GO TO FULL VERSION