Informatica 3 Liceo Scientifico Scienze Applicate/Posizionamento CSS

Posizionare elementi in una pagina HTML grazie alla sintassi CSS

Quando creiamo una pagina HTML e ci vogliamo avvalere dell'aiuto di CSS per modificarne l'aspetto, possiamo decidere, tramite alcune istruzioni CSS, di posizionare a nostro piacimento alcuni oggetti della pagina HTML.

Possiamo posizionare i diversi elementi nelle quattro direzioni (left, right, up e down) oppure possiamo posizionarli uno sopra l'altro.

Posizionamento statico

Gli elementi HTML sono posizionati staticamente di default, generalmente sulla sinistra.

Posizionamento fisso

Un elemento con una posizione fissa è posizionato relativamente alla finestra del browser e rimarrà in quella posizione anche se si fa uno scroll della pagina.

Esempio:

p {
  position: fixed;
  top: 22px;
  left: 5px;
}

Posizionamento relativo

Un oggetto è posizionato relativamente quando è posizionato relativamente alla sua posizione di partenza, quindi si danno delle coordinate relative rispetto al posizionamento statico.

Esempio:

p {
  position: relative;
  left: 20px;
}

Posizionamento assoluto

Un elemento è posizionato assolutamente quando la sua posizione è relativa alla sua posizione iniziale e quindi si usano le coordinate assolute.

Esempio:

p {
  position: absolute;
  down: 200px;
}

Elementi sovrapponibili

Quando gli elementi sono posizionati diversamente rispetto alla loro posizione di partenza, possono sovrapporsi, andando anche ad oscurare contenuti. Aggiungiamo infatti una proprietà chiamata z-index che ci permette di decidere quale elemento visualizzare per primo.

Esempio:

p_1 {
  position: relative;
  left: 20px;
  z-index:20
}

p_2 {
  position: relative;
  left: 29px;
  z-index:0
}

Il primo elemento sarà posto superiormente rispetto al secondo e quindi il primo sarà visibile mentre il secondo solo in parte. Un elemento con z-index maggiore sarà posizionato sempre sopra ad un altro con z-index minore.