As propriedades de layout mais comumente usadas em CSS são Float (explicação detalhada da propriedade flutuante CSS Float) e a outra é a propriedade de posicionamento CSS Position.
1.posição:estático
O posicionamento padrão de todos os elementos é: position:static, o que significa que o elemento não está posicionado e aparece onde deveria estar no documento.
De modo geral, você não precisa especificar position:static, a menos que queira substituir o posicionamento definido anteriormente.
#div-1 {
posição:estática;
}
2. posição:relativa
Se você definir position:relative, poderá usar top, bottom, left e right para mover o elemento em relação ao local onde ele deve aparecer no documento. [Isso significa que o elemento ainda ocupa sua posição original no documento, mas é movido visualmente em relação à sua posição original no documento]
#div-1 {
posição:relativo;
topo:20px;
esquerda:-40px;
}
3. posição:absoluta
Quando position:absolute é especificado, o elemento fica fora do documento (ou seja, não ocupa mais posição no documento) e pode ser posicionado com precisão de acordo com o conjunto superior, inferior, esquerdo e direito.
#div-1a {
posição:absoluta;
topo:0;
certo:0;
largura:200px;
}