O posicionamento absoluto emprégase para establecer de forma exacta a posición na que se mostra a caixa dun elemento. A nova posición da caixa indícase mediante as propiedades top, right,bottom y left. A interpretación dos valores destas propiedades é moito máis complexa que no posicionamento relativo, xa que neste caso dependen do posicionamento do elemento no que está contido o elemento a formatar.
Cando unha caixa se posiciona de forma absoluta, o resto de elementos da páxina vense afectados e modifican a súa posición de xeito que "saen do fluxo normal da páxina", o que provoca que o resto de elementos da páxina se movan e, en ocasións, ocupen a posición orixinal na que se encontraba a caixa.
Ao igual que no posicionamento relativo, cando se posiciona de forma absoluta unha caixa é probable que se produzan solapamentos con outras caixas.
No seguinte exemplo, posiciónase de forma absoluta a caixa 2:
Exemplo do comportamento do posicionamento normal con respecto ao absoluto.
A caixa 2 está posicionada de forma absoluta, o que provoca que o resto de elementos da páxina modifiquen a súa posición. En concreto, a caixa 3 deixa o seu lugar orixinal e pasa a ocupar o oco deixado pola caixa 2.
Por outra parte, o desprazamento dunha caixa posicionada de forma absoluta contrólase mediante as propiedades top, right, bottom y left. A diferenza do posicionamento relativo, a interpretación dos valores destas propiedades depende do elemento colector da caixa posicionada.
Determinar a referencia utilizada para interpretar os valores de top, right, bottom y left dunha caixa posicionada de forma absoluta é un proceso complexo que se compón dos seguintes pasos:
- Percórrense todos os elementos colectores empezando polo máis próximo á caixa e chegando ata o
<body> - O primeiro elemento colector que estea posicionado de calquera forma diferente a
position: staticconvértese na referencia que determina a posición da caixa posicionada de forma absoluta. - Se ningún elemento colector está posicionado, a referencia é a ventá do navegador, que non debe confundirse co elemento
<body>da páxina.
Unha vez determinada a referencia do posicionamento absoluto, a interpretación dos valores das propiedades top, right, bottom y left realízase como segue:
- O valor da propiedade
topindica o desprazamento dende o bordo superior da caixa ata o bordo superior do elemento colector que se utiliza como referencia. - O valor da propiedade
rightindica o desprazamento dende o bordo dereito da caixa ata o bordo dereito do elemento colector que se utiliza como referencia. - O valor da propiedade
bottomindica o desprazamento dende o bordo inferior da caixa ata o bordo inferior do elemento colector que se utiliza como referencia. - O valor da propiedade
leftindica o desprazamento dende o bordo esquerdo da caixa ata o bordo esquerdo do elemento colector que se utiliza como referencia.
