Home Stampante Corso HTML e Css

Lezione_7-2 - Posizionamento relativo - position:relative;

Questo è un invito ad approfondire e consolidere la conoscenza di questo argomento. Gli elementi con position:relative rispondono alle proprietà left, top, right, bottom che consentono di spostare gli oggetti a cui sono applicate rispetto alla posizione di default. Gli spostamenti sono rispetto allo spigolo superiore sinistro del loro contenitore, che è l'origine del sistema di riferimento degli oggetti che contiene. La posizione di un oggetto posizionato relativamente si ottiene aggiungendo gli offset assegnati alle coordinate che avrebbe il suo spigolo superiore sinistro in conformità al suo modello a box e alla sua proprietà display.

Esempi di posizionamento relativo.

Per illustrare il funzionamento del posizionamento relativo dividerò orizzontalmento lo schermo in due sezioni, sinistra e destra. Nella sezione sinistra posizionerò, secondo il posizionamento statico, uno o più oggetti, evidenziandoli con bordi e colori. Nella sezione destra, agli stessi oggetti, con posizionamento relativo, applicherò specifici valori di offset in modo da poterne verificarne l'effetto.

Esempio 1

Nella sezione di destra a "Oggetto 1" ho applicato i seguenti valori di offset: left:30px; top:20px;. Notare come l'oggetto si è spostato fuoriuscendo dal proprio contenitore.

Oggetto 1

Oggetto 1

Esempio 2

Agli elementi "Oggetto 2", "Oggetto 3", e "Oggetto 4", nella sezione destra, ho applicato i seguenti offset:

Notare come "Oggetto 3" vada a finire sotto ad "Oggetto 4".

Oggetto 2

Oggetto 3

Oggetto 4

Oggetto 2

Oggetto 3

Oggetto 4

Esempio 3

Agli oggetti di destra ho applicato i seguenti offset:

Oggetto 5

Oggetto 6

Oggetto 7

ramarro

Oggetto 5

Oggetto 6

Oggetto 7

ramarro

Esercizi.

Per prima cosa scarica il file HTML_072.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_072 e apri in Notepad++ i file HTML_072.html, e i file .css

Studiane il contenuto.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.

Per approfondire.

Nelle specifiche ufficiali del w3 consortium puoi consultare:

Nel sito developer mozilla puoi consultare: