Positioned Layout e Transforms

Rompere le Regole del Flusso

Finora abbiamo conosciuto tre sistemi di layout: Flow, Flexbox e Grid. Hanno tutti una cosa in comune: cercano in ogni modo di evitare che gli elementi si sovrappongano. Ogni scatola ha il suo spazio, e i vicini si spostano per farle posto.

In questa lezione studiamo l'ultimo sistema di layout CSS: il Positioned Layout.

Qui le regole cambiano. Gli elementi possono sovrapporsi, uscire dai loro contenitori, rimanere ancorati al viewport mentre la pagina scorre, e spostarsi senza costringere i vicini a cedere spazio.

Cosa imparerete

• Le quattro varianti di position: relative, absolute, fixed, sticky
• Come gestire le sovrapposizioni con z-index e gli stacking context
• Come funzionano davvero overflow e gli scroll container
• Come nascondere contenuto nel modo giusto (anche per l'accessibilità)
• Come spostare, scalare e ruotare gli elementi con le transform

I Sistemi di Layout CSS

Riprendiamo la panoramica che abbiamo già visto, e spostiamo i riflettori.

Alla fine della lezione aggiungiamo un bonus: le transform, che non sono un sistema di layout ma sono lo strumento che completa il toolkit per muovere e trasformare gli elementi.

Attivare Positioned Layout

Entriamo in Positioned Layout scrivendo la proprietà position su un elemento:

.box {
  position: relative;
}

I valori che attivano Positioned Layout sono quattro:

• relative — l'elemento resta nel suo posto naturale, ma sblocca una serie di superpoteri
• absolute — l'elemento esce dal flusso e si piazza dove vogliamo noi
• fixed — l'elemento resta ancorato al viewport (la finestra del browser), anche durante lo scroll
• sticky — un ibrido: scorre con la pagina fino a un punto, poi si "incolla"

Ognuno di questi quattro valori si comporta in modo diverso e ha le sue regole. Li vedremo uno alla volta.

E il valore di default?

Il valore di default della proprietà position è static. Un elemento statically-positioned (posizionato staticamente) è semplicemente un elemento che non usa Positioned Layout: sta usando Flow, Flexbox o Grid come sempre.

Se voglio tornare indietro da Positioned Layout al comportamento normale, scrivo:

.box {
  position: static;
  /* oppure: position: initial; */
}

HTML di partenza

<div class="row">
  <div class="box">1</div>
  <div class="box highlight">2</div>
  <div class="box">3</div>
</div>

position: relative - Sbloccare gli Offset

relative è la variante più tranquilla di Positioned Layout. Di solito potete scrivere position: relative su un elemento e, a prima vista, non cambia niente. Sembra che non faccia nulla!

In realtà fa due cose:

1. Sblocca nuove proprietà CSS

Entrando in Positioned Layout, diventano attivi quattro nuovi "direttori di movimento":

.box {
  position: relative;
  top: 20px;
  left: 40px;
  right: 0;
  bottom: 0;
}

Queste proprietà — top, left, right, bottom — sono dei "riferimenti direzionali" che indicano di quanto spostare l'elemento.

2. Rende quegli offset relativi alla posizione naturale

Con position: relative, gli offset sono misurati rispetto al punto dove l'elemento sarebbe stato normalmente. Ecco perché si chiama relative: relativo alla propria posizione naturale.

HTML di partenza

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box pink">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.pink {
  position: relative;
  top: 0px;
  left: 0px;
}

Da notare: mentre spostate la box rosa, le box grigie intorno a lei non si muovono. La rosa si sposta, ma il layout che la circonda resta identico.

Movimento Visivo vs Movimento di Layout

Prima di scorrere il demo, provate a predire: se spostate la box rosa di 20px verso il basso, le box nere sotto di lei si spostano anch'esse? Pensateci un momento, poi guardate il confronto.

A questo punto potreste pensare: "Fico, ma io posso già spostare un elemento con margin. Che differenza c'è?"

La differenza è enorme, ed è la chiave per capire tutto Positioned Layout:

• margin fa parte del calcolo del layout: se sposto un elemento con margin-top, tutto quello che gli sta intorno si riorganizza per tenerne conto.
• top/left/right/bottom in Positioned Layout sono cosmetici: spostano l'elemento dopo che il layout è già stato calcolato. Nessun vicino si muove.

HTML di partenza

<div class="stack">
  <div class="box pink">A</div>
  <div class="box dark">B</div>
  <div class="box dark">C</div>
</div>

/* niente */

.pink {
  margin-top: 20px;
}

.pink {
  position: relative;
  top: 20px;
}

Una conseguenza meno ovvia: la larghezza

C'è un altro effetto collaterale di margin che left non ha. Se un elemento block non ha una larghezza specificata, margin-left può restringerlo (perché la larghezza si calcola in base allo spazio rimasto). left, invece, sposta la scatola così com'è: la larghezza non cambia, e l'elemento può "uscire" dal contenitore.

Nota finale: relative funziona anche su elementi inline! È utile per piccoli "nudge" tipografici, come alzare di qualche pixel una parola in <strong> all'interno di un paragrafo senza rompere l'allineamento delle altre righe.

position: absolute - Rompere il Flusso

Finora tutti gli elementi si sono comportati in modo "ordinato": uno sotto l'altro, ognuno con il suo spazio. Adesso facciamo qualcosa di radicale: prendiamo un elemento e lo stacchiamo dal flusso per piazzarlo dove vogliamo.

Questa è la specialità di position: absolute.

.pink-box {
  position: absolute;
  top: 0px;
  right: 0px;
}

Due cose cambiano rispetto a relative

1. Gli offset top/left/right/bottom non sono più relativi alla posizione naturale. Sono distanze misurate dai bordi del contenitore (vedremo fra poco quale contenitore, esattamente).
2. L'elemento esce completamente dal flusso. Per il layout, è come se non esistesse più.

HTML di partenza:

<div class="frame">
  <p>Paragrafo uno.</p>
  <p>Paragrafo due.</p>
  <p>Paragrafo tre.</p>
  <div class="pink-box"></div>
</div>

.pink-box {
  position: absolute;
  top: 20px;
  left: 25%;
}

A cosa serve absolute?

È lo strumento giusto per elementi che devono galleggiare sopra il contenuto:

• Badge e pulsanti di chiusura di una card
• Tooltip, dropdown, popover
• Forme decorative dietro un componente
• Etichette ancorate a un'immagine

In tutti questi casi, vogliamo che l'elemento non influenzi il layout intorno.

Elementi "Fantasma"

Quando un elemento ha position: absolute, per il browser è come se non esistesse più durante il calcolo del layout. È un fantasma, un ologramma: potete attraversarlo con la mano.

Conseguenza 1: l'ordine nel DOM non conta (quasi mai)

Spostare un elemento assolutamente posizionato dentro l'HTML non cambia il risultato visivo. Se ha top: 0; right: 0, andrà sempre in alto a destra, che sia il primo o l'ultimo figlio.

Conseguenza 2: se non gli do un'ancora, eredita la posizione di flusso

Se scrivo position: absolute ma non specifico nessuno fra top/left/right/bottom, l'elemento resta dove sarebbe stato in Flow layout. Ma è comunque fuori dal flusso, quindi si sovrappone agli elementi che lo seguono.

Conseguenza 3: i genitori possono "collassare"

Osservate questo esempio:

<div class="parent">
  <div class="child"></div>
</div>

Se .child è l'unico figlio e gli mettiamo position: absolute, il genitore .parent collassa a zero altezza. Per il layout del genitore, il figlio è sparito.

Da notare: con OFF il genitore è alto 200px (l'altezza del figlio). Con ON il figlio è absolute, il genitore collassa e resta alto solo quanto i suoi bordi.

Sovrapporre con absolute o con Grid?

Nella lezione di Grid avete visto una cosa interessante: più elementi possono finire nella stessa cella e sovrapporsi, senza position: absolute. Quindi adesso abbiamo due tecniche per far sovrapporre elementi. Quando usare quale?

HTML di partenza

<section class="hero">
  <div class="hero-image">Immagine</div>
  <h3 class="hero-title">Titolo sopra l'immagine</h3>
</section>

.hero {
  display: grid;
}
.hero > * {
  grid-area: 1 / 1;
}

.hero {
  position: relative;
}
.hero-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
}

Regola pratica

• Preferite Grid overlap quando gli elementi devono restare in layout, il contenitore deve adattarsi al contenuto, o volete evitare calcoli numerici fragili.
• Usate position: absolute quando l'elemento è anchored UI (badge, close button, tooltip, dropdown, popover, decorazioni) e non deve riservare spazio nel layout.

Il Containing Block

Quando scrivete top: 0; left: 0 su un elemento absolute, il browser lo piazza nell'angolo in alto a sinistra... di cosa, esattamente?

Di un rettangolo di riferimento chiamato containing block (letteralmente, "blocco contenitore").

In Flow layout, il containing block è semplice: è il content box del genitore diretto.

Con position: absolute, le regole cambiano. Quando un elemento dice "io sono absolute, chi è il mio riferimento?", il browser sale l'albero del DOM e si ferma al primo antenato con una position diversa da static. Quello è il containing block.

L'algoritmo del browser per trovare il containing block di un absolute

1. Parti dall'elemento
2. Sali su un antenato alla volta
3. Fermati al primo antenato con position diversa da static (relative, absolute, fixed, sticky)
4. Quel primo antenato posizionato è il containing block
5. Se nessun antenato è posizionato, usa il viewport (la finestra del browser) come containing block

HTML di partenza

<div class="level-1">
  <div class="level-2">
    <div class="level-3">
      <div class="pink"></div>
    </div>
  </div>
</div>

.level-1 { position: relative; }
.pink {
  position: absolute;
  top: 0;
  right: 0;
}

Il Trucco per Centrare (e una Scorciatoia)

Gli elementi absolute hanno un altro trucco nella manica: possiamo centrarli perfettamente dentro il loro containing block.

La ricetta a 4 ingredienti

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  margin: auto;
}

Serve tutto e quattro:

1. position: absolute
2. Tutte e quattro le proprietà di offset a 0
3. Una width e una height esplicite
4. margin: auto

Il browser vede i quattro 0 e capisce: "vuole stare centrato in entrambe le dimensioni". margin: auto distribuisce lo spazio residuo equamente.

HTML di partenza

<div class="frame">
  <div class="box"></div>
</div>

Ancora rilevante oggi?

Sì! Anche con Flexbox e Grid, questo trucco è utilissimo per UI "galleggianti" come modal, dialog e drawer, che stanno sopra al resto della pagina con position: fixed (lo vediamo nella sezione 3).

La scorciatoia: inset

Scrivere top: 0; left: 0; right: 0; bottom: 0 ogni volta è noioso. CSS moderno ci dà inset:

.box {
  position: absolute;
  inset: 0;            /* equivalente ai 4 valori sopra */
  width: 100px;
  height: 100px;
  margin: auto;
}

inset imposta tutti e quattro gli offset in un colpo solo. Accetta anche valori diversi (come margin o padding):

.box {
  position: absolute;
  inset: 25px;    /* 25px da tutti i lati */
}

Chi Sta Sopra a Chi?

Abbiamo visto che gli elementi absolute possono sovrapporsi fra loro e agli altri elementi. Ma adesso arriva la domanda vera:

Quando due elementi occupano gli stessi pixel, chi "vince"? Chi viene disegnato sopra?

La risposta breve è: dipende dal layout mode e dall'ordine nel DOM. La risposta lunga occupa questa intera sezione.

Un ponte con la lezione di Grid

Nella lezione di Grid avete scoperto una piccola bizzarria: i grid children possono usare z-index anche senza position, e ancora meglio, z-index su un grid child crea uno stacking context. Vi avevo promesso che ne avremmo riparlato. Il momento è adesso.

In questa sezione costruiamo il modello generale del browser per la sovrapposizione, e dentro questo modello la regola di Grid diventa un caso particolare del tutto coerente.

Cosa copriamo

• Come il browser decide l'ordine di disegno di default
• La proprietà z-index e le sue regole
• I stacking context: che cosa sono, come nascono, perché creano problemi
• La proprietà isolation: l'antidoto pulito contro le "z-index wars"

Come Dipinge il Browser

Quando due elementi occupano gli stessi pixel, il browser segue un ordine di pittura ben preciso. La regola di base, semplificata per ora:

Gli elementi posizionati sono sempre disegnati sopra quelli non-posizionati.

Un elemento è posizionato se ha position: relative, absolute, fixed o sticky. È non-posizionato se è in Flow, Flexbox, Grid senza position, oppure ha position: static.

Il processo in due fasi

1. Il browser dipinge tutti gli elementi non-posizionati (Flow, Flexbox, Grid), seguendo l'ordine del DOM.
2. Poi dipinge sopra tutti gli elementi posizionati, sempre seguendo l'ordine del DOM.

Demo: due box che si sovrappongono

<style>
  .box {
    width: 50px;
    height: 50px;
    background: silver;
  }
  .second {
    margin-top: -30px;   /* forziamo la sovrapposizione */
    margin-left: 20px;
    background: hotpink;
  }
</style>
<div class="box first">A</div>
<div class="box second">B</div>

z-index - L'Asse Z

Cosa succede quando l'ordine del DOM non basta? Ad esempio, quando la box che deve stare sopra non è l'ultima nel DOM per motivi di accessibilità o di struttura semantica?

Per questo esiste la proprietà z-index.

.first.box {
  position: relative;
  z-index: 2;
}
.second.box {
  position: relative;
  z-index: 1;
}

La z si riferisce al terzo asse: oltre a x (orizzontale) e y (verticale), il browser considera anche una profondità. Valori più alti di z-index "emergono" verso lo schermo; valori più bassi affondano.

Regole di z-index

1. Funziona solo con elementi posizionati (più un paio di eccezioni: i grid children e i flex children, dove z-index funziona lo stesso). Nel Flow layout puro non ha effetto.
2. Accetta solo numeri interi: z-index: 1.5 non è valido.
3. Il valore di default è auto. auto non è uguale a 0: un elemento con z-index: auto partecipa all'ordine di disegno del suo stacking context genitore senza crearne uno nuovo. Un elemento posizionato con z-index: 0 invece crea un nuovo stacking context (ne parliamo fra poco). Nei casi semplici sembrano identici; la differenza emerge appena un figlio usa z-index. Qualsiasi valore positivo "promuove" un elemento sopra i fratelli senza z-index.
4. Sono ammessi valori negativi (z-index: -1), ma portano più grattacapi che benefici. In questa lezione non li usiamo.

HTML di partenza

<div class="box first">A</div>
<div class="box second">B</div>

.first.box {
  position: relative;
  z-index: 0;
}
.second.box {
  position: relative;
}

Slider z-index sulla prima box (da 0 a 3). La seconda box resta senza z-index: vedete il cambio di livello in tempo reale.

Che Cos'è uno Stacking Context

Finora abbiamo pensato a z-index come a un "ordine globale": un numero più alto vince sempre. In realtà non è così.

Definizione: uno stacking context (letteralmente "contesto di impilamento") è un gruppo di elementi che vengono confrontati fra loro in fase di disegno. I valori di z-index hanno senso solo dentro lo stesso stacking context.

Pensatelo come un condominio: z-index: 99 al quinto piano del palazzo A non ha alcun effetto su chi sta al primo piano del palazzo B. Sono due classifiche separate — la classifica del palazzo A e quella del palazzo B non si mescolano mai.

Quando Nasce un Nuovo Stacking Context

Un nuovo stacking context nasce quando un elemento soddisfa certe condizioni. Le cause più comuni (quelle che vedrete nei progetti reali):

• position posizionato + z-index con valore diverso da auto (la combinazione classica: ricordate che z-index: 0 crea il context, z-index: auto no)
• position: fixed o position: sticky (da sole, senza bisogno di z-index)
• opacity minore di 1 (sì, anche solo opacity: 0.99 crea un context!)
• transform con qualunque valore (vedremo perché nell'ultima sezione)
• isolation: isolate (lo strumento che vedremo fra poco, pensato apposta per questo)

C'è una lista completa su MDN, ma queste cinque coprono praticamente tutti i casi reali.

I Discendenti Sono "Schiacciati" Dentro il Context

Conseguenza importante

Quando un elemento crea uno stacking context, tutti i suoi discendenti che usano z-index vengono "schiacciati" dentro quel context. I loro z-index non possono più scavalcare elementi che stanno fuori dal context del genitore.

<div style="position: relative; z-index: 1;"> <!-- crea un context -->
  <div style="z-index: 999">
    Sono schiacciato dentro il context del genitore.
    Non posso scavalcare elementi fuori dal genitore.
  </div>
</div>
<div style="position: relative; z-index: 2;">
  <!-- Questo sta sopra l'intero context con z-index:1,
       anche se dentro c'è un z-index:999 -->
</div>

Da notare: la box rosa prova a uscire a destra, ma resta comunque sotto al context scuro, perché il suo z-index vale solo dentro il context giallo.

Perché z-index: 999999 Non Basta

È lo scenario ricorrente più frustrante del CSS. Avete un elemento che deve stare sopra; alzate il suo z-index. Non basta, lo alzate ancora. E ancora. Siete a z-index: 99999 e ancora non funziona. Questa è la "z-index war": una guerra di numeri sempre più grandi contro un problema che non è un problema di numeri — è un problema di stacking context.

Il caso tipico: tre card di pricing con un header sticky

Una pagina ha:

• Un header in cima: position: fixed; z-index: 2
• Tre card di prezzi: .card { position: relative; z-index: 1 }, e la card centrale con z-index: 2 per emergere sopra le altre

Tutto sembra funzionare. Poi arriva la segnalazione: scrollando, l'header passa "in mezzo" alle card. Sotto la card centrale, sopra le laterali. Un disastro.

Perché?

Perché header e card sono tutti nello stesso stacking context (quello della root della pagina). I loro z-index si confrontano tra loro:

• Le card laterali (z-index: 1) → sotto l'header (z-index: 2). OK.
• La card centrale (z-index: 2) → pari con l'header, e vince per ordine nel DOM. Bug!

La soluzione sbagliata: alzare ancora il z-index dell'header. Funziona oggi, fallisce domani.

La soluzione giusta: fare in modo che le tre card vivano in uno stacking context isolato, così i loro z-index interni non possano più confrontarsi con quello dell'header.

isolation - Creare un Context Senza Effetti Collaterali

Abbiamo detto che position: relative; z-index: 1 sul contenitore delle card crea uno stacking context e risolve il bug:

.pricing {
  position: relative;
  z-index: 1;
}

Funziona, ma ha uno svantaggio: siamo costretti a scegliere un numero (z-index: 1) e a dichiarare che il contenitore è posizionato, anche se non ci serve per altri motivi.

La proprietà isolation fa esattamente — e soltanto — quella cosa lì:

.pricing {
  isolation: isolate;
}

Un solo valore, un solo effetto: crea uno stacking context. Non richiede position, non richiede un numero, non ha effetti collaterali sul layout.

HTML di partenza

<header class="page-header">Header</header>
<section class="pricing">
  <article class="card">Starter</article>
  <article class="card primary">Pro</article>
  <article class="card">Enterprise</article>
</section>

.pricing {
  /* isolation: isolate; */
}

Scena che riproduce il bug: header sticky + tre card sovrapposte. Toggle isolation: isolate sul wrapper .pricing:

• OFF: scrollando, l'header passa in mezzo alle card (bug)
• ON: le tre card restano tutte sotto all'header, come un gruppo unico

A Volte Non Serve Affatto z-index

Prima di raggiungere per z-index, chiedetevi: posso semplicemente riordinare l'HTML?

Se due elementi sono entrambi posizionati e hanno z-index: auto, il browser li dipinge secondo l'ordine del DOM: l'elemento scritto dopo va sopra.

Esempio: una card con blob decorativi dietro

Versione "con z-index":

<div class="wrapper">
  <div class="card">Hello World</div>
  <span class="decoration decoration-a" aria-hidden="true"></span>
  <span class="decoration decoration-b" aria-hidden="true"></span>
</div>

.wrapper    { position: relative; }
.card       { position: relative; z-index: 2; }
.decoration { position: absolute; z-index: 1; }

Versione "senza z-index" — basta mettere i blob prima della card nell'HTML:

<div class="wrapper">
  <span class="decoration decoration-a" aria-hidden="true"></span>
  <span class="decoration decoration-b" aria-hidden="true"></span>
  <div class="card">Hello World</div>  <!-- dopo nel DOM → sopra -->
</div>

.wrapper    { position: relative; }
.card       { position: relative; }
.decoration { position: absolute; }

Risultato identico, zero z-index da gestire.

Riepilogo: Livelli, z-index, Stacking Context

Prossima sezione: usciamo dal flusso in modi ancora più radicali. position: fixed, overflow, scroll container e il famigerato "transformed ancestor" che fa impazzire i developer.

Sezione 3: fixed, overflow, Scroll Container

Con relative e absolute abbiamo imparato a far galleggiare gli elementi dentro la pagina. Ora alziamo il tiro.

In questa sezione studiamo tre meccanismi che ridefiniscono il rapporto fra un elemento e il suo contenitore:

• position: fixed: l'elemento ignora persino i suoi antenati e si aggancia al viewport.
• overflow: decidiamo cosa succede quando il contenuto sbrodola fuori dal box genitore.
• Scroll container: un meccanismo nascosto di CSS che overflow attiva senza dircelo.

Alla fine della sezione: saprete diagnosticare quel bug classico che tutti incontriamo prima o poi: "ho messo position: fixed e non funziona".

position: fixed - Lo Stacco dal DOM

position: fixed è il cugino ribelle di position: absolute.

Fixed si può definire un "absolute sotto steroidi". Il meccanismo è simile: l'elemento esce dal flusso, ignora i fratelli, non occupa spazio. Ma il suo contenitore di riferimento è diverso.

.help-btn {
  position: fixed;
  right: 32px;
  bottom: 32px;
}

HTML di partenza

<main class="page">
  <button class="help-btn">Help</button>
  <p>Contenuto lungo della pagina...</p>
</main>

Questo bottone resta cementato nell'angolo basso-destro dello schermo, indipendentemente da quanto scrollate la pagina o da dove si trovi nel DOM.

Casi d'uso tipici: pulsanti di aiuto, chat widget, menu mobile aperto, banner di cookie, overlay modali.

Il Pattern Classico: Modale a Schermo Intero

Ricordate il trucco del centraggio visto nella Sezione 1? Funziona anche con position: fixed, e questo è il pattern più usato sul web per le modali.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  height: 200px;
  margin: auto;
}

HTML di partenza

<div class="modal" role="dialog" aria-modal="true">
  <h3>Conferma</h3>
  <p>Testo della modale</p>
</div>

Cosa succede:

1. I quattro offset a 0 dicono: "occupa tutto il viewport".
2. width e height espliciti riducono l'elemento.
3. margin: auto distribuisce equamente lo spazio residuo → centraggio perfetto, sia in orizzontale che in verticale.

Il risultato: una modale centrata sullo schermo, che resta centrata anche se l'utente scrolla.

Forward reference: Nell'esercizio finale della lezione costruirete esattamente questo tipo di overlay, combinandolo con z-index, overflow, header sticky e un tocco di transform.

Il Gotcha del Containing Block

Preparatevi, perché questo è uno dei gotcha più frustranti di CSS. Non è un bug: è il comportamento specificato — ma è quasi sempre una sorpresa. Vi capiterà di scrivere position: fixed e di vedere l'elemento che... scrolla con la pagina. Eppure il CSS è giusto!

.container {
  /* Questa proprietà cambia il containing block per TUTTI i discendenti */
  transform: translate(1px, 1px);
}

.fixed {
  position: fixed;
  top: 0;
}

HTML di partenza

<div class="container">
  <div class="fixed">.fixed</div>
  <div class="content">...contenuto lungo...</div>
</div>

Cosa succede: quando un antenato (genitore, nonno, bis-bisnonno...) ha una transform, diventa lui il containing block sia per i figli fixed sia per i figli absolute. Per fixed l'effetto è dirompente: l'elemento smette di ancorarsi al viewport e inizia a comportarsi come absolute rispetto a quell'antenato, scrollando con il contenuto. Per absolute l'effetto è più sottile: l'elemento si annida all'antenato trasformato invece che al position: relative che vi aspettavate.

Perché esiste questa regola? Le transform compongono in un contesto 3D/compositor. CSS deve garantire che il layout dei discendenti rimanga coerente con la trasformazione applicata all'antenato, e perciò promuove quell'antenato a containing block.

Le proprietà colpevoli

• transform (anche translate, rotate, scale, ecc. quando usati come proprietà singole)
• filter
• will-change: transform
• perspective
• backdrop-filter

// Replace ".the-fixed-child" for a CSS selector
// that matches the fixed-position element:
const selector = '.the-fixed-child';

function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }

  let parent = elem.parentElement;

  while (parent) {
    const {
      transform,
      willChange,
      filter,
    } = getComputedStyle(parent);

    if (
      transform !== 'none' ||
      willChange === 'transform' ||
      filter !== 'none'
    ) {
      console.warn(
        'Found a culprit!\n',
        parent,
        { transform, willChange, filter }
      );
    }
    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

Regola pratica: se position: fixed non funziona, la prima cosa da guardare non è il CSS dell'elemento, ma i suoi antenati.

overflow: Gestire il Contenuto che non Sta nel Box

Passiamo al secondo tema della sezione: overflow.

Il problema: di solito i block element hanno altezza variabile e crescono per contenere i figli. Ma quando fissiamo height (o max-height), creiamo una condizione impossibile: "contieni tutto il contenuto in 100px".

Esempio classico: il nome completo di Pablo Picasso.

.info {
  max-height: 100px;
  border: 3px solid;
}

<div class="info">
  <strong>Name:</strong> Pablo Diego José Francisco de Paula Juan
  Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad
  Ruiz y Picasso
</div>
<div class="info">
  <strong>Born:</strong> 25 October 1881
</div>

Cosa fa il browser di default? Lascia che il testo sbordi fuori dai confini, senza però considerarlo nei calcoli di layout. Risultato: il testo sovrascrive il box successivo. Un bel pasticcio.

Nella prossima slide vediamo come domare questo comportamento.

I Quattro Valori (più visible) di overflow

Nota: overflow è uno shorthand per overflow-x e overflow-y. Potete gestire gli assi separatamente:

.wrapper {
  overflow-y: auto;   /* scroll verticale se serve */
  overflow-x: hidden; /* taglia l'eventuale overflow orizzontale */
}

HTML di partenza

<div class="wrapper">
  <p>Contenuto molto piu lungo dell'altezza disponibile...</p>
</div>

Regola operativa: usate overflow: auto quando pensate che un elemento possa sbordare. Usate overflow: hidden quando volete nascondere apposta il contenuto che esce. Non mischiate i due intenti.

La Differenza Fondamentale: Tagliare o Scorrere?

A prima vista overflow: hidden e overflow: scroll sembrano opposti: uno nasconde, l'altro fa scrollare. In realtà, fanno la stessa cosa di base con una differenza nascosta.

Il segreto: overflow: hidden è overflow: scroll con le barre disabilitate.

.wrapper {
  overflow: hidden;
  height: 100px;
}

<div class="wrapper">
  <ol>
    <li><a href="/">Link uno</a></li>
    <li><a href="/">Link due</a></li>
    ...
    <li><a href="/">Link sei</a></li>
  </ol>
</div>

Provate a premere Tab per muovervi fra i link: quando il focus arriva su un link "nascosto", il container scrolla da solo per mostrarlo! Eppure non c'era nessuna barra di scroll visibile.

/*
  overflow: hidden  ->  è uno scroll container senza UI
  overflow: scroll  ->  è uno scroll container con UI sempre visibile
  overflow: auto    ->  è uno scroll container con UI condizionale
*/

Perché è importante? Perché introduce un concetto nascosto che confonde mezzo mondo del web: lo scroll container. Lo vediamo ora.

Scroll Container: il TARDIS di CSS

Immaginate una valigia con il fondo finto: all'esterno sembra chiusa di quella dimensione, ma dentro c'è molto più spazio — bisogna "frugare" (scrollare) per trovare tutto quello che contiene. Per chi conosce Doctor Who: è la TARDIS — una cabina telefonica fuori, enormità dentro. Entrambe le metafore dicono la stessa cosa: il container sembra piccolo, ma il suo contenuto interno è molto più grande.

.wrapper {
  height: 150px;
  overflow-y: auto;
}
.photo {
  width: 100%;
}

HTML di partenza

<div class="wrapper">
  <img class="photo" src="tall-image.jpg" alt="Foto molto alta">
</div>

Il .wrapper è alto 150px, ma può contenere una foto altissima: è un portale verso una dimensione alternativa.

Le tre regole dello scroll container

1. Si crea automaticamente quando impostate overflow a scroll, auto, hidden (o clip su un solo asse in alcuni casi).
2. Gestisce entrambi gli assi insieme. Controllare un solo asse non è il default naturale; è possibile (es. overflow-x: hidden; overflow-y: auto) ma richiede configurazione esplicita ed è facile sbagliare, perché il browser promuove comunque il container a scroll container su entrambi gli assi. Se attivate overflow-x, il container diventa uno scroll container anche sull'asse Y.
3. I figli sono prigionieri. Una volta entrati nel portale, non escono più dal bordo del container.

Perché questo è un problema? Perché spesso vogliamo una cosa sola: nascondere l'overflow orizzontale, ma lasciar sbrodolare quello verticale (per esempio, per far uscire dei pallini decorativi dall'alto). Di solito non funziona come ci si aspetta.

.wrapper {
  overflow-x: hidden;      /* vogliamo solo questo */
  overflow-y: visible;     /* ...ma questo non funziona! */
}

Il browser lo ignora e tratta comunque tutto come scroll container.

La soluzione moderna: overflow: clip, che non crea uno scroll container.

.wrapper { overflow-x: clip; } /* questo funziona davvero */

Scroll Orizzontale: la Ricetta Pratica (Tab Bar Mobile)

Finora abbiamo parlato di overflow verticale. Ma il pattern più comune di overflow orizzontale lo conoscete tutti: la tab bar orizzontale scrollabile che trovate su quasi ogni app mobile (iOS, Android, YouTube, Amazon…).

Il problema: i tab sono elementi inline di default. Come le parole di un paragrafo, vanno a capo quando finisce lo spazio. Il container non sborda mai, e lo scroll non si attiva.

La ricetta

.tab-bar {
  overflow-x: auto;          /* attiva lo scroll orizzontale */
  white-space: nowrap;       /* impedisce l'a capo dei tab */
  display: flex;             /* alternativa moderna a white-space: nowrap */
}

.tab {
  flex-shrink: 0;            /* i tab non si restringono */
  padding: 12px 20px;
}

HTML di partenza

<nav class="tab-bar">
  <a class="tab" href="#">Overview</a>
  <a class="tab" href="#">Dettagli</a>
  <a class="tab" href="#">Recensioni</a>
  <a class="tab" href="#">FAQ</a>
  <a class="tab" href="#">Prezzi</a>
</nav>

Perché white-space: nowrap? Dice al container: "tieni tutto sulla stessa riga, non andare mai a capo". Con display: flex + flex-shrink: 0 si ottiene lo stesso risultato in modo più esplicito e moderno.

Nota su nowrap: è scritto tutto attaccato, non no-wrap. Non c'è una buona ragione — il CSSWG lo ha classificato come un errore storico del linguaggio.

Riepilogo: Fuori dal Flusso, Dentro la Viewport

Regola d'oro di questa sezione: se position: fixed "non funziona", cercate un antenato con transform, filter, o perspective. Quasi sempre il colpevole è lì.

Prossima sezione: Sticky, il più subdolo dei valori di position. E poi un tema apparentemente semplice — "come nascondo un elemento?" — che nasconde più di quanto sembri.

Sezione 4: Il Magico sticky e l'Arte di Nascondere

In questa sezione chiudiamo il cerchio su position con il quarto valore — sticky — e poi affrontiamo un tema apparentemente banale: come si nasconde un elemento? (Spoiler: ci sono almeno cinque modi diversi, e scegliere quello sbagliato può rendere il sito inaccessibile.)

Cosa vedremo:

• position: sticky: il valore che scorre con la pagina e poi si blocca — come un ascensore che si ferma a un piano
• I quattro modi classici in cui sticky fallisce e come diagnosticarli
• Hidden content: display: none, visibility: hidden, opacity: 0, visually-hidden, aria-hidden, inert
• Perché ogni tecnica di hiding ha implicazioni per l'accessibilità e i lettori di schermo

position: sticky — Metà relative, metà fixed

position: sticky è il valore più recente di position. L'idea è semplice da enunciare, subdola da capire:

Come mnemonica alternativa: è come un magnete attratto dal bordo del viewport, ma con raggio limitato — non si stacca mai dal suo container.

Mentre scrollate, l'elemento si comporta come relative. Arrivato al bordo, "si attacca" e inizia a comportarsi come fixed finché il suo genitore non sparisce dalla vista.

header {
  position: sticky;
  top: 0;  /* ⚠️ Serve SEMPRE un offset! */
}

Due cose fondamentali:

1. Serve almeno un offset (top, left, right o bottom). Senza, sticky non fa nulla. L'offset non sposta l'elemento come in relative: dice al browser "a quale distanza dal bordo inizi a incollarti".
2. Non esce mai dal suo genitore. Quando il container scorre via, lo sticky scorre con lui.

Il pattern classico (header di sezione):

section h2 {
  position: sticky;
  top: 0;
}

<section>
  <h2>Sezione 1</h2>
  <p>Lorem ipsum...</p>
</section>
<section>
  <h2>Sezione 2</h2>
  <p>...</p>
</section>

Ogni h2 si "incolla" in cima mentre scrolliamo dentro la sua sezione, e viene rimpiazzato dall'h2 successivo quando entra nella propria sezione. Magia? No: ogni header è semplicemente prigioniero del suo genitore.

Sticky Occupa Spazio Davvero

Ricordate: absolute e fixed sono fantasmi. Non occupano spazio nel layout, i fratelli si comportano come se non esistessero.

sticky è diverso: come relative e static, è in-flow. Occupa spazio reale, e quello spazio resta occupato anche quando l'elemento è "incollato" e visivamente fermo nel viewport.

.main-box {
  position: sticky;  /* provate a cambiare in 'fixed' */
  top: 0;
}

HTML di partenza

<section class="container">
  <header class="main-box">Header</header>
  <p>Contenuto...</p>
</section>

Cambiando da sticky a fixed:

• Gli altri fratelli risalgono per riempire il buco lasciato dal fantasma
• Il container si rimpicciolisce
• Il contenuto sembra "schiacciarsi"

Tornando a sticky:

• Gli altri fratelli restano fermi
• Il container conserva l'altezza
• L'elemento si muove rimanendo in-flow

Curiosità: sticky funziona anche in orizzontale (left: 0), anche se è molto più raro. E funziona finalmente anche con gli elementi <thead>/<tbody> delle tabelle dal 2021.

Bug #1: Un Antenato con overflow Rompe lo Sticky

Ecco il motivo n°1 per cui sticky "non funziona" nei progetti reali.

main {
  overflow: auto;   /* il colpevole invisibile */
  max-height: 200px;
}

header {
  position: sticky;
  top: 0;
}

HTML di partenza

<main>
  <header class="mio-sticky">Header sticky</header>
  <p>...contenuto lungo...</p>
</main>

Il principio: sticky si attacca al primo scroll container che incontra risalendo il DOM. Se un antenato ha overflow: auto/scroll/hidden, quello diventa il contesto di sticky, non più il viewport.

Conseguenza: l'header si incolla dentro quel container, non sulla pagina. Se il container non scrolla (perché non è abbastanza grande), sticky sembra semplicemente non fare nulla.

Perché è così subdolo: il colpevole può essere un bisnonno nel DOM, messo lì mesi prima per risolvere un problema di scrollbar orizzontale. E non c'è nessun errore in console.

Come si diagnostica:

// Da incollare in console.
// Risale il DOM e logga ogni antenato con overflow diverso da visible.
const selector = '.mio-sticky';

function findCulprits(elem) {
  let parent = elem.parentElement;
  while (parent) {
    const { overflow } = getComputedStyle(parent);
    if (['auto', 'scroll', 'hidden'].includes(overflow)) {
      console.log(overflow, parent);
    }
    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

Regola d'oro: se sticky non si attacca, prima di tutto controllate gli overflow degli antenati.

Bug Sticky #2, #3, #4 e Come Riconoscerli

/* Il pattern di Grid ricordato */
.sidebar-wrapper {
  align-self: start;    /* la cella smette di stretchare */
}
.sidebar {
  position: sticky;
  top: 0;
}

HTML di partenza

<div class="layout">
  <div class="sidebar-wrapper">
    <aside class="sidebar">Indice</aside>
  </div>
  <main>Contenuto lungo...</main>
</div>

Regola pratica (tutti e 4 i bug): sticky richiede spazio, containing block giusto, e nessun scroll container ribelle. Se manca uno dei tre, fallisce in silenzio.

Come Nascondere un Elemento (ne Vale la Pena Sapere)

Ultima grande area di questa lezione: come si nasconde qualcosa in CSS?

Sembra banale, ma c'è molta sottigliezza, e scegliere il metodo sbagliato significa creare problemi di accessibilità o rompere la SEO.

display: none — il classico. L'elemento svanisce dal layout come se non esistesse. Utile per toggle responsive:

.desktop-header { display: none; }
@media (min-width: 1024px) {
  .desktop-header { display: block; }
  .mobile-header { display: none; }
}

visibility: hidden — mantello dell'invisibilità. L'elemento sparisce ma tiene il posto, come un fantasma. Utile per rivelare risposte al passaggio del mouse, o per riservare spazio a contenuto che arriverà:

.answer { visibility: hidden; }
.answer-wrapper:hover .answer { visibility: visible; }

HTML di partenza

<div class="row">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
</div>

Curiosità: visibility: hidden può essere selettivamente annullata sui figli. Se il padre è hidden, un figlio specifico può essere visibility: visible. Nessun altro metodo lo permette.

Nella prossima slide vediamo gli altri tre, e perché due di essi sono trappole di accessibilità.

opacity, Visually-Hidden, aria-hidden, inert

opacity: 0 — l'elemento diventa trasparente, ma non è nascosto davvero:

.flourish { opacity: 0.5; }  /* semi-trasparente */
.flourish { opacity: 0; }    /* invisibile... ma ancora lì */

Visually-Hidden — la tecnica corretta per "nascondi visivamente, tieni per screen reader":

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

(Il vecchio snippet usava clip: rect(0 0 0 0), che è deprecato — ancora funzionante ma sconsigliato. clip-path: inset(50%) è supportato ovunque. white-space: nowrap evita che il testo vada a capo nei contenitori inline.)

<button>
  <span class="visually-hidden">Apri le impostazioni</span>
  <svg><!-- icona ingranaggio --></svg>
</button>

L'utente vedente vede l'icona, lo screen reader legge "Apri le impostazioni". Spesso preferibile all'attributo aria-label quando il testo è contenuto: i servizi di traduzione automatica leggono il testo visibile ma non gli attributi aria-label. Non è una regola assoluta — aria-label resta valido per bottoni con icona singola, input, o controlli dove un nodo di testo non starebbe bene.

aria-hidden="true" — il contrario di visually-hidden: visibile agli occhi, invisibile agli screen reader:

<a href="/">
  Go Home
  <span aria-hidden="true">Go Home</span>  <!-- duplicato decorativo per animazione -->
</a>

Lo screen reader dirà "Go Home" una volta sola invece di due.

inert — l'attributo moderno (2023) che risolve il problema:

<!-- ✅ Corretto: inert da solo basta -->
<p inert>
  This paragraph contains <a href="/">a link</a>.
</p>

<!-- ⚠️ Didattico (per confronto, non il pattern raccomandato) -->
<p inert aria-hidden="true">...</p>

inert rimuove l'elemento e tutti i suoi discendenti dall'interazione: niente focus, niente click, niente screen reader. Supportato da tutti i browser moderni; è il modo giusto per disattivare completamente una sezione (es. contenuto dietro una modale aperta).

Riepilogo: Appiccicoso e Invisibile

Sticky

Hidden content

Regola d'oro accessibilità: prima di nascondere qualcosa, chiedetevi "per chi lo voglio nascondere: la vista, la tastiera, lo screen reader, o tutti?". La risposta determina il metodo.

Prossima sezione: il bonus della lezione. Le transform, lo strumento per spostare, scalare e ruotare gli elementi senza toccare il layout. Il complemento perfetto di tutto quello che abbiamo visto finora.

Sezione 5: Le transform

Siamo all'ultima sezione. Tutto quello che abbiamo visto finora (position, z-index, overflow, sticky) serve a decidere dove un elemento sta nel layout.

Le transform fanno una cosa diversa: decidono come appare. Sono uno strumento che ci permette di:

• Spostare un elemento (translate)
• Ingrandire o rimpicciolire (scale)
• Ruotare (rotate)
• Inclinare (skew)

Tutto senza toccare il layout. I fratelli non si spostano, il genitore non cambia dimensione, gli algoritmi di Flow/Flex/Grid non se ne accorgono.

Perché sono nella lezione di positioning? Perché:

1. Le abbiamo già incontrate come colpevole del bug transformed-ancestor.
2. Sono il completamento naturale di top/left — entrambi spostano elementi "sopra al layout" senza riflusso.
3. Il pattern più comune (centraggio con translate(-50%, -50%)) si usa insieme a position: fixed.

transform: Trattare l'Elemento Come Fosse un'Immagine

Prima di tuffarci nelle funzioni, un mental model che risolve metà dei dubbi futuri.

Le transform trattano l'elemento come una texture appiattita. Come se prendessero una screenshot dell'elemento + figli, la incollassero in un livello separato, e poi la deformassero in Photoshop.

Conseguenze pratiche:

• Il testo dentro scala insieme al box (non si ricalcola il line-wrapping).
• Gli algoritmi di layout non se ne accorgono. Il box continua a occupare il suo spazio originario nel flusso.
• Non vengono ricalcolate la posizione dei fratelli, non cambia l'altezza del genitore.

.box {
  /* Forma generale */
  transform: <funzione>(<valore>);
}

/* Esempi */
.b1 { transform: translateX(20px); }
.b2 { transform: scale(1.5); }
.b3 { transform: rotate(45deg); }
.b4 { transform: skewX(10deg); }

HTML di partenza

<div class="box">box</div>

Le transform si applicano come stringa. Possiamo passarne una o più insieme (ci torniamo nella slide sulla composizione).

translate(): Muovere Elementi in X e Y

translate sposta un elemento lungo X e Y. Valori positivi → destra/giù; negativi → sinistra/su.

.box { transform: translateY(20px); }

/* Equivalente a: */
.box { transform: translate(0px, 20px); }

Possiamo anche usare le versioni mono-asse:

.box { transform: translateX(50px); }
.box { transform: translateY(-30px); }

HTML di partenza

<div class="box">box</div>

.box {
  transform: translate(0px, 0px);
}

La proprietà più potente di translate: le percentuali sono relative all'elemento stesso, non al contenitore.

.box {
  transform: translateY(-100%);
}

Questo sposta l'elemento verso l'alto della sua esatta altezza, qualunque essa sia. Se il box è alto 40px, si sposta di 40px; se è alto 200px, di 200px.

Perché è unico? In CSS, le percentuali sono quasi sempre relative al genitore:

Questa differenza è l'arma segreta per il centraggio moderno, i modal, e una marea di trucchi che vediamo nelle prossime slide.

Spostare con top/left o con translate()?

Ora che abbiamo visto entrambi, è il momento di confrontarli. Non sono intercambiabili.

Quando usare top/left:

• Piccole sistemazioni tipografiche (nudge di 1-2px) con position: relative
• Quando l'elemento deve essere anche un containing block per figli absolute
• Quando volete creare uno stacking context con z-index numerico

Quando usare translate():

• Centraggio con -50% (vedi slide successiva)
• Animazioni e transizioni (performance)
• Spostamenti relativi alle dimensioni dell'elemento (100%)
• Combinare movimento con rotate/scale

Regola pratica: se state per scrivere un'animazione, usate translate. Se state posizionando un layout statico con offset piccoli, top/left vanno benissimo.

Il Pattern di Centraggio che Tutti Usano

Abbiamo visto due pattern di centraggio: il trucco con quattro 0 + margin: auto, e Flexbox/Grid con place-items: center. Ne esiste un terzo, il più usato per i modali e tooltip:

Provate a predire: cosa succede se applicate solo top: 50%; left: 50% a una modale, senza translate(-50%, -50%)? Dove finisce l'elemento? Perché il centro visivo risulta spostato in basso a destra? Prendete un secondo per ragionarci, poi leggete la spiegazione qui sotto.

.modal {
  position: fixed;   /* o absolute */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML di partenza

<div class="modal">Modale</div>

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0%, 0%);
}

Cosa succede passo-passo:

1. top: 50% sposta il bordo superiore dell'elemento al 50% del viewport. L'elemento è troppo in basso.
2. left: 50% fa lo stesso sull'asse X. L'elemento è troppo a destra.
3. translate(-50%, -50%) sposta l'elemento della sua stessa metà all'indietro. Risultato: il centro dell'elemento è al 50%/50% del viewport.

Perché non si fa solo con il margin auto? Perché margin: auto richiede width e height espliciti. Questo pattern funziona anche con elementi di dimensione sconosciuta (contenuto dinamico, modali che si ridimensionano con il testo).

/* Elemento con contenuto variabile */
.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* niente width/height: si adatta al contenuto */
}

Questo è il caso in cui translate con percentuali fa qualcosa che nessun altro meccanismo CSS sa fare: usare la dimensione dell'elemento stesso come riferimento.

scale(): Zoom Senza Effort

scale cambia la dimensione di un elemento, proporzionalmente o per asse:

.box { transform: scale(1.5); }        /* 1.5x sia X che Y */
.box { transform: scale(2, 0.5); }     /* doppia larghezza, metà altezza */
.box { transform: scaleX(1.5); }       /* solo asse X */
.box { transform: scaleY(0.8); }       /* solo asse Y */

HTML di partenza

<div class="box">Ciao!</div>

Il valore è un moltiplicatore senza unità (come line-height): 2 = doppio, 0.5 = metà, 1 = invariato, 0 = invisibile.

.box {
  transform: scale(1, 1);
}

A prima vista sembra equivalente a cambiare width/height, ma ha una differenza cruciale:

scale(1.5)  ->  il box E il testo dentro diventano 1.5x
width: 150% ->  il box si allarga, il testo NON cambia (si ricalcola il wrap)

Le transform appiattiscono l'elemento come texture (ricordate la Slide 46). Il testo dentro scala visivamente, la dimensione dei caratteri effettiva non cambia. Non può essere diversamente: sarebbe un ri-layout.

A volte questo "difetto" è una feature:

• Un'animazione di pop (scale 1 → 1.1 → 1) fa pulsare TV vintage tutto un elemento, testo incluso: effetto coerente.
• Un'animazione di ingrandimento modale non ricalcola la dimensione dei caratteri a ogni frame: liscio e veloce.

rotate() e skew() — Le Funzioni "Espressive"

rotate ruota l'elemento attorno al proprio centro:

.box { transform: rotate(45deg); }      /* 45 gradi orari */
.box { transform: rotate(-90deg); }     /* 90 antiorari */
.box { transform: rotate(0.25turn); }   /* = 90deg */
.box { transform: rotate(1turn); }      /* giro completo (360deg) */

HTML di partenza

<div class="box">box</div>

L'unità più comune è deg (degrees). L'unità turn è comodissima: 1turn = 360°, 0.5turn = 180°. Funziona fin da Internet Explorer 9.

.box {
  transform: rotate(0deg) skewX(0deg);
}

skew inclina l'elemento sul piano 2D, come se lo schiacciassimo di lato:

.box { transform: skewX(20deg); }
.box { transform: skewY(10deg); }
.box { transform: skew(15deg, 5deg); } /* shorthand */

skew — usato di rado su contenuto vero (il testo diventa fastidioso da leggere), ma buono da riconoscere. Molto comune su elementi decorativi diagonali — le "bande" oblique tra sezioni delle landing page. Si può inclinare il box lasciando il testo dritto applicando un contro-skew sul figlio.

.diagonal-banner {
  background: linear-gradient(90deg, #ff006e, #8338ec);
  transform: skewY(-3deg);
  padding: 40px 0;
}
.diagonal-banner > * {
  transform: skewY(3deg); /* annulla l'inclinazione per il contenuto interno */
}

transform-origin: Il Centro della Rotazione (e dello Scale)

Di default, ogni transform pivota attorno al centro dell'elemento. Possiamo cambiarlo con transform-origin:

.box {
  transform-origin: top left;   /* pivot in alto a sinistra */
  transform: rotate(30deg);
}

Valori possibili:

transform-origin: center;        /* default */
transform-origin: top left;
transform-origin: 50% 100%;      /* centro-basso */
transform-origin: 0 0;            /* equivalente a top left */
transform-origin: 20px 40px;     /* pixel espliciti */

HTML di partenza

<div class="box">box</div>

.box {
  transform-origin: center;
  transform: rotate(0deg);
}

Effetto visibile:

• Ruotando con origin center → l'elemento gira in place.
• Ruotando con origin bottom → l'elemento "dondola" sul piede.
• Ruotando con origin top right → l'elemento "cade" come una porta.
• Scalando con origin top left → l'elemento cresce verso basso-destra, non in tutte le direzioni.

Caso d'uso classico: animazioni di "growing from" (un menu a tendina che scende dal suo bottone):

.dropdown {
  transform-origin: top center;
  transform: scaleY(0);            /* invisibile all'inizio */
  transition: transform 200ms;
}
.dropdown.open {
  transform: scaleY(1);            /* cresce verso il basso */
}

Con origin center il menu sembrerebbe uscire dal nulla al centro — brutto. Con origin top center cresce naturalmente verso il basso dal bottone sopra di lui.

Combinare Più Transform: l'Ordine Conta

Possiamo applicare più transform insieme, separate da spazi:

.box {
  transform: rotate(45deg) translateX(100px);
}

Mini-quiz — prima di leggere: disegnate su un foglio dove finisce una box rossa di 100×100px dopo rotate(45deg) translateX(100px), partendo dal centro dello schermo. Poi confrontate con il risultato qui sotto.

Il modello mentale corretto: il CSS legge la lista delle funzioni da sinistra a destra, come uno stack di istruzioni su un sistema di riferimento mobile. Ogni funzione modifica il sistema di riferimento dell'elemento; le funzioni successive agiscono su quel sistema già modificato.

(Nota per chi conosce l'algebra lineare: matematicamente le matrici si moltiplicano da destra a sinistra. La lettura da sinistra a destra produce lo stesso risultato finale — è solo una prospettiva più intuitiva per i principianti.)

Confronto:

/* A: modifica il sistema di riferimento ruotandolo, poi trasla lungo il suo asse X ruotato */
.box-a { transform: rotate(45deg) translateX(100px); }

/* B: trasla nel sistema originale, poi ruota attorno all'origine dell'elemento */
.box-b { transform: translateX(100px) rotate(45deg); }

HTML di partenza

<div class="box">box</div>

.box {
  transform: rotate(45deg) translateX(80px);
}

Risultati diversi!

• A rotate(45deg) translateX(100px): il sistema di riferimento ruota di 45°; la translateX sposta di 100px lungo l'asse X già ruotato → l'elemento finisce in diagonale a 45°.
• B translateX(100px) rotate(45deg): prima trasla 100px a destra nel sistema originale, poi ruota di 45° attorno all'origine dell'elemento → l'elemento è 100px a destra e ruotato in place.

Uso pratico — l'orbita:

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(80px);
  }
  to {
    transform: rotate(360deg) translateX(80px);
  }
}

rotate prima → il sistema di riferimento ruota. translateX(80px) si sposta sempre verso "destra" rispetto al sistema ruotato. Risultato: la luna orbita a 80px di distanza dal pianeta.

Se invertiamo l'ordine (translateX(80px) rotate(...)) la luna semplicemente ruota in place 80px a destra. Niente orbita.

Regola mentale: leggete le transform da sinistra a destra come istruzioni su un sistema di riferimento mobile — ogni funzione muove il "pavimento" su cui la successiva agisce.

⚠️ transform Non Funziona su Elementi inline

Un'ultima trappola. Le transform non hanno effetto sugli elementi inline in Flow layout.

.inline-fella {
  transform: rotate(-10deg);  /* non fa nulla! */
}

<p>
  Why <span class="inline-fella">Hello</span> there!
</p>

Perché? Gli inline element sono progettati per "andare con il flusso" del testo, con il minimo disturbo possibile. Distorcerli romperebbe il line-wrapping. Il browser semplicemente ignora la transform.

Le soluzioni (in ordine di preferenza):

1. Cambiare display: display: inline-block — l'elemento resta inline (sta sulla stessa riga del testo) ma accetta transform, width, height, padding-top/bottom.

   .inline-fella {
     display: inline-block;
     transform: rotate(-10deg);
   }

2. Passare a Flexbox o Grid: se l'elemento fa parte di un layout strutturato, metterlo in un contenitore flex o grid risolve tutto automaticamente — i figli di flex/grid non sono mai inline.
3. display: block: se non vi serve che l'elemento stia in-line con il testo.

Il Nuovo Modo Moderno: Proprietà Singole

Dal 2022 (Chrome 104, già prima su Firefox/Safari) CSS supporta translate, rotate e scale come proprietà autonome:

Caso d'uso concreto — card con hover:

Immaginate una card che ha sia una traslazione verticale sia un effetto di zoom al passaggio del mouse. Con transform shorthand dovete ripetere tutti i valori:

.card {
  transform: translateY(-8px) scale(1);
}
.card:hover {
  /* Dobbiamo ripetere translateY anche se non cambia! */
  transform: translateY(-8px) scale(1.05);
}

Con le proprietà individuali, ogni proprietà è indipendente:

.card {
  translate: 0 -8px;
  scale: 1;
}
.card:hover {
  scale: 1.05;  /* solo questo cambia */
}

/* Vecchio modo */
.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

/* Nuovo modo */
.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

HTML di partenza

<article class="card">card</article>

.card {
  translate: 0 0px;
  rotate: 0deg;
  scale: 1;
}

Vantaggi:

• Animazioni modulari. Con transform, per cambiare solo scale al hover dovete ripetere tutto:

  .target { transform: translateX(50%) rotate(30deg) scale(1.2); }
  .target:hover { transform: translateX(50%) rotate(30deg) scale(2); }

  Con le proprietà individuali:

  .target { translate: 50% 0; rotate: 30deg; scale: 1.2; }
  .target:hover { scale: 2; }

• Animazioni indipendenti su transizioni e keyframe: ogni proprietà ha la sua timing. Un elemento può ruotare in 2s mentre scala in 500ms, senza dover calcolare i valori intermedi.

Differenza importante: l'ordine di applicazione delle proprietà individuali è fisso: prima translate, poi rotate, poi scale (dall'esterno verso l'interno), a prescindere dall'ordine in cui le scrivete.

Con transform invece l'ordine dipende da come le scrivete (ogni funzione agisce sul sistema di riferimento già modificato dalla precedente, come abbiamo visto nella slide sulla composizione).

Se combinate entrambe:

.target {
  translate: 50% 0;       /* applicato per primo */
  rotate: 30deg;           /* applicato dopo */
  scale: 1.2;              /* applicato dopo */
  transform: skew(5deg);  /* applicato per ultimo (più interno) */
}

Regola pratica: usate le proprietà individuali per nuovo codice, soprattutto se userete animazioni. Usate transform classico quando vi serve un ordine di composizione non-standard (es. orbite).

Riepilogo: il Toolkit delle transform

Cerniera di collegamento: le transform sono il completamento del toolkit di positioning. Tutto quello che abbiamo imparato — uscire dal flusso, centrare, sovrapporre, nascondere — trova il suo ultimo tassello in queste funzioni. Nell'ultimo esercizio le mettiamo tutte insieme.

Il Top Layer: Sopra Qualunque Stacking Context

Prima dell'esercizio finale, un concetto che spiega perché le modali "fatte a mano" con solo div + z-index hanno sempre qualche bug in agguato.

Il browser espone un livello speciale, chiamato top layer ("livello superiore"), che si trova sopra qualsiasi stacking context CSS. Nessun z-index, per quanto alto, può competere con il top layer.

Chi può accedere al top layer?

Solo alcune API native del browser:

• L'elemento <dialog> aperto con dialog.showModal()
• Elementi con l'API Popover (<div popover> + popovertarget)
• Elementi in modalità fullscreen (video, giochi, applicazioni)

Perché questa differenza è importante?

Una modale costruita con div + position: fixed + z-index: 9999 può essere ancora "battuta" da:

• Un menu <select> nativo (che usa il top layer del sistema operativo)
• Un altro overlay che arriva dopo nel DOM con z-index più alto
• Un componente di terze parti che non conosce i vostri numeri

Il pattern moderno e accessibile:

const dialog = document.querySelector('dialog');
dialog.showModal();

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

HTML di partenza

<main class="page">...contenuto della pagina...</main>
<dialog open>
  <h3>Conferma</h3>
  <p>Testo della modale</p>
</dialog>

<dialog> + showModal() gestisce automaticamente:

• Posizionamento nel top layer (sopra qualunque stacking context)
• inert sul resto del documento
• Focus trap dentro la modale
• Chiusura con Esc
• ::backdrop come overlay nativo

L'esercizio che segue costruisce la modale "a mano" in CSS puro. Serve a capire cosa fa il browser dietro le quinte quando chiamate showModal(). Poi, in produzione, usate <dialog>.

E Adesso Sapete Ripararlo

Le tre idee da portare a casa:

• Il layout non è una cosa sola. Flow, Flexbox, Grid e Positioned sono algoritmi distinti. Cambiare position significa cambiare quale algoritmo governa un elemento.
• Tutto è connesso. z-index dialoga con position. overflow crea scroll container che governano sticky. transform crea stacking context e può rompere fixed. La causa dei bug è quasi sempre in un'interazione che non avevate mappato.
• L'accessibilità non è opzionale. Ogni decisione di positioning o hiding ha effetti sull'ordine di Tab, sugli screen reader, sull'esperienza di chi usa il web diversamente da voi.

Mappa diagnostica — Cosa guardare prima:

Grazie per l'attenzione. Ora quando vedrete una modale centrata, un header sticky, un overlay, o un tooltip che sborda da uno scroll container… saprete ripararlo quando si rompe.