Prerequisiti: Posizionamento assoluto.
Elementi fissi rispetto al viewport
Elementi fissi rispetto al viewport: fondamenti.
position: fixed toglie l’elemento dal normale flusso e usa normalmente il viewport come riferimento. Può mantenere un controllo in un angolo mentre scorri. Gli altri contenuti non riservano automaticamente spazio per quella scatola: un avviso fisso può quindi coprire testo, soprattutto su una finestra stretta o con zoom.
Come funziona: elementi fissi rispetto al viewport
Elementi fissi rispetto al viewport: comportamento nel browser.
Alcune proprietà di antenati, come transform in contesti pertinenti, possono creare un riferimento diverso. Non interpretare fixed come una garanzia assoluta di riferimento allo schermo in qualunque struttura. Prima di diagnosticare uno spostamento inatteso controlla gli antenati.
Scelte di utilizzo e limiti
Elementi fissi rispetto al viewport: progetto e verifica.
Un controllo fisso deve essere percepibile e utilizzabile senza ostacolare altri elementi. Prova lo scorrimento, il focus e la dimensione minima della finestra. Se il componente è soltanto informativo può essere più semplice mantenerlo nel flusso. Un posizionamento fisso non è una tecnica universale per costruire intestazioni.
Esempio commentato
Elementi fissi rispetto al viewport: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Posizionamento fisso</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="avviso">Avviso di prova</div>
<main><h1>Pagina lunga</h1><p>Scorri per osservare l’avviso.</p><div class="spazio">Area dimostrativa.</div></main>
</body>
</html>
File stile.css
.avviso { position: fixed; bottom: 1rem; right: 1rem; padding: 1rem; background-color: #eef4fa; border: 1px solid navy; }
.spazio { min-height: 120vh; }
Risultato nel browser
L’avviso resta nell’angolo mentre la pagina scorre. L’area alta serve soltanto a rendere osservabile l’esperimento.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
position | fixed | Modalità di posizionamento. |
bottom | 1rem | Offset inferiore in un contesto di posizionamento pertinente. |
right | 1rem | Offset destro in un contesto di posizionamento pertinente. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
background-color | #eef4fa | Colore dello sfondo dell’elemento. |
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
LABORATORIO
Sperimentare: Elementi fissi rispetto al viewport
L’avviso resta nell’angolo mentre la pagina scorre. L’area alta serve soltanto a rendere osservabile l’esperimento.
Obiettivo: Comprendere e applicare elementi fissi rispetto al viewport attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Restringi la finestra e aumenta lo zoom, controllando se l’avviso copre altri contenuti.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
La posizione resta fissa, ma l’ingombro relativo aumenta. Una pagina reale deve prevenire la copertura di informazioni.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | La posizione resta fissa, ma l’ingombro relativo aumenta. Una pagina reale deve prevenire la copertura di informazioni. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Sposta l’avviso in alto a sinistra, annullando i vecchi offset.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.avviso { top: 1rem; left: 1rem; right: auto; bottom: auto; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Elementi fissi rispetto al viewport: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Qual è normalmente il riferimento di fixed? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.