Posicions absolutes i relatives

Publicat el 17/05/2004

Les caixes amb position:absolute tenen la particularitat de poder-les posicionar en un punt (x,y).

El punt (0,0) serà sempre l'ancessor més proper amb una posició relativa declarada explicitament. Si no hi ha cap ancessor amb aquesta propietat el body farà aquesta funció.

Suposant aquest XHTML


<body>
   <div id="contenidor">
      <p>text de mostra</p>
   </div>
</body>

Amb aquest CSS


div#contenidor {
   position: relative;
   margin-top: 50px;
   }
p {
   position: absolute;
   top: 5px;
   left: 5px;
   }

El paràgraf es posicionarà al punt (5,5) del div és a dir, al (5,55) del navegador (left,margin-top + top).

Amb aquest altre CSS


div#contenidor {
   margin-top: 50px;
   }
p {
   position: absolute;
   top: 5px;
   left: 5px;
   }

El paràgraf es posicionarà al punt (5,5) del navegador, obviant el marge del div.