Posicionamento relativo do CSS
- Página anterior Visão geral de posicionamento do CSS
- Próxima página Posicionamento absoluto do CSS
A caixa do elemento posicionado relativamente se deslocará por uma distância determinada. O elemento ainda mantém a forma que tinha antes de ser posicionado, e o espaço que ele originalmente ocupava ainda é mantido.
Posicionamento relativo do CSS
O posicionamento relativo é um conceito muito fácil de dominar. Se um elemento for posicionado relativamente, ele aparecerá na posição onde está. Em seguida, pode-se ajustar a posição vertical ou horizontal para que o elemento 'se mova' em relação ao seu ponto de partida.
Se o top for definido como 20px, a caixa ficará 20 pixels abaixo da parte superior da posição original. Se o left for definido como 30 pixels, será criado um espaço de 30 pixels à esquerda do elemento, ou seja, o elemento será movido para a direita.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Como mostrado na figura a seguir:
Atenção, ao usar posicionamento relativo, o elemento ainda ocupa o espaço original, independentemente de ser movido ou não. Portanto, mover o elemento pode cobrir outros caixas.
Exemplo de posicionamento relativo do CSS
- Posicionamento: Posicionamento relativo
- Este exemplo demonstra como posicionar um elemento em relação à sua posição normal.
- Página anterior Visão geral de posicionamento do CSS
- Próxima página Posicionamento absoluto do CSS
