O posicionamento relativo despraza unha caixa respecto da súa posición orixinal establecida mediante o posicionamento normal. O desprazamento da caixa contrólase coas propiedades top,right, bottom y left.
O valor da propiedade top interprétase como o desprazamento entre o bordo superior da caixa na súa posición final e o bordo superior da mesma caixa na súa posición orixinal.
Da mesma forma, o valor das propiedades left, right y bottom indica respectivamente o desprazamento entre o bordo esquerdo/dereito/inferior da caixa na súa posición final e o bordo esquerdo/dereito/inferior da caixa orixinal.
Polo tanto, a propiedade top emprégase para mover as caixas de forma descendente, a propiedadebottom move as caixas de forma ascendente, a propiedade left utilízase para desprazar as caixas cara á dereita e a propiedade right move as caixas cara á esquerda. Este comportamento parece pouco intuitivo e é causa de erros cando se empezan a deseñar páxinas con CSS.
Se utilizamos valores negativos nas propiedades top, right, bottom y left, o seu efecto é xustamente o inverso.
O desprazamento relativo dunha caixa non afecta ao resto de caixas adxacentes, que se mostran na mesma posición que se a caixa desprazada non se tivese movido da súa posición orixinal.
Exemplo do comportamento do posicionamento normal con respecto ao relativo.
Na imaxe anterior, a caixa 2 desprazouse lateralmente cara á dereita e verticalmente de forma descendente. Como o resto de caixas da páxina non modifican a súa posición, prodúcense solapamentos entre os contidos das caixas.
