Posicionament i elements flotants

Posicionament

La propietat position pot prendre quatre valors que significaran quatre sistemes diferents per determinar la posició dels elements dins la pàgina. Aquestos valors són els següents:

• static És el sistema de posicionament per defecte. Els elements seran situats simplement un baix de l’altre.

• relative Amb aquest posicionament podrem utilitzar altres atributs (top, bottom, left i right) per desplaçar un element des de la posició que li correspondria amb un posicionament estàtic. Per exemple amb left: 100 px l’element es desplaçarà cent píxels cap a la dreta.

• absolute Els mateixos atributs que abans (top, bottom, left i right) ens serviran per indicar la posició de l’element. Les distàncies que indiquem es mesuraran des dels marges del objecte que conté a aquest.

• fixed El posicionament fixe és similar al absolut, però les distàncies es mesuren des dels marges de la finestra del navegador. És important adonar-se de que el desplaçament de la pàgina no afectarà als elements amb posicionament fixe.

p#centrat {
    width: 60%;
    position: relative;
    left: 20%;
}

Elements flotants

La propietat float pot prendre els valors left o right. La conseqüència serà que l’element es situarà a l’esquerra o la dreta de la pàgina, mentre que la resta del contingut fluirà per el seu costat.

La posició d’un element flotant es pot modificar amb un posicionament de tipus relatiu, però no de tipus absolut ni fixe.

h2.flotant_esquerra {
    float: left;
}

Nota

Pots consultar un exemple on s’han utilitzat els diferents posicionaments i elements flotants.