Summary  
This chapter covers CSS relative positioning, demonstrating how to visually offset an element from its original location using top, bottom, left, and right properties without affecting the layout of surrounding elements.

General domain of usage  
Web development

**Posizionamento relativo** consente di posizionare visivamente un elemento rispetto alla sua posizione originale. Allo stesso tempo, gli elementi adiacenti non occupano il posto dell'elemento.
```css
position: relative;
```

È possibile utilizzare le proprietà `top`, `left`, `bottom` e `right` per indicare lo spostamento visivo di un elemento rispetto alla sua posizione iniziale. I valori possono essere positivi o negativi e in diverse unità (`px`, `%`, ecc.). Analizzare il seguente esempio per osservare l'effetto ottenibile:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZvbHVwdGF0ZW0gZW9zCiAgICAgICAgZXQgbWF4aW1lIG9mZmljaWlzLCBtb2xlc3RpYWUgYXV0ZW0gZWEgY29ycG9yaXMgdW5kZSBxdWlidXNkYW0gbmloaWwKICAgICAgICBpcHNhbSBmYWNlcmUgY29ycnVwdGksIGludmVudG9yZSB2b2x1cHRhdGUgY29uc2VxdWF0dXIgbGFib3Jpb3NhbSBvcHRpbwogICAgICAgIG1hZ25hbSBvZGlvLgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXRlbSBlb3MKICAgICAgICBldCBtYXhpbWUgb2ZmaWNpaXMsIG1vbGVzdGlhZSBhdXRlbSBlYSBjb3Jwb3JpcyB1bmRlIHF1aWJ1c2RhbSBuaWhpbAogICAgICAgIGlwc2FtIGZhY2VyZSBjb3JydXB0aSwgaW52ZW50b3JlIHZvbHVwdGF0ZSBjb25zZXF1YXR1ciBsYWJvcmlvc2FtIG9wdGlvCiAgICAgICAgbWFnbmFtIG9kaW8uCiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIj4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBWb2x1cHRhdGVtIGVvcwogICAgICAgIGV0IG1heGltZSBvZmZpY2lpcywgbW9sZXN0aWFlIGF1dGVtIGVhIGNvcnBvcmlzIHVuZGUgcXVpYnVzZGFtIG5paGlsCiAgICAgICAgaXBzYW0gZmFjZXJlIGNvcnJ1cHRpLCBpbnZlbnRvcmUgdm9sdXB0YXRlIGNvbnNlcXVhdHVyIGxhYm9yaW9zYW0gb3B0aW8KICAgICAgICBtYWduYW0gb2Rpby4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5jYXJkOm50aC1jaGlsZCgybikgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB0b3A6IDMwcHg7CiAgbGVmdDogNTBweDsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jYXJkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIG1hcmdpbjogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB5ZWxsb3c7Cn0=

> Nota
>
> È fondamentale menzionare che non è necessario specificare tutte le proprietà `top`, `bottom`, `left` e `right` per l'elemento con un valore di posizione diverso da `static`. È sufficiente impostare una proprietà per il posizionamento verticale (`top` o `bottom`) e una per il posizionamento orizzontale (`left` o `right`).

Cosa fa la proprietà `position: relative`?

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Posizionamento Relativo Spiegato

Awesome!

Posizionamento Relativo Spiegato