IL POSIZIONAMENTO CON I CSS
Nel flusso normale gli elementi si posizionano partendo da sinistra in alto e si susseguono l’un l’altro verso il basso a destra, fino ad occupare tutto lo spazio disponibile. Gli elementi si distanziano attraverso i margini. Uno dei sistemi utilizzati per variare questo schema è il posizionamento, attraverso il quale, agendo sulla proprietà position si può variare la posizione di un elemento rispetto alla sua posizione originale nel documento e anche rispetto agli altri elementi che lo circondano. Un altro metodo per variare lo schema predefinito, è il floating, con il quale si riesce a creare le colonne. Il floating è consentito dalla proprietà float. Ci sono cinque tipi di posizionamento che si possono utilizzare, attraverso la proprietà position per controllare la disposizione dei diversi elementi in una pagina.
TIPI DI POSIZIONAMENTO
- Statico(static);
- Relativo(relative);
- Assoluto(absolute);
- Fisso(fixed);
- Appiccicoso(Sticky)
Si può ricorrere, inoltre, alla tecnica del floating, proprietà float che vedremo in seguito. Gli elementi vengono quindi posizionati utilizzando le proprietà top, bottom, left, and right. Tuttavia, queste proprietà non funzioneranno a meno che non venga impostata prima la proprietà position. Funzionano anche in modo diverso a seconda del valore della posizione.
POSITION STATIC
Gli elementi HTML sono posizionati static per impostazione predefinita. Tali elementi non sono interessati dalle proprietà top, bottom, left, and right. Un elemento con posizione static non è posizionato in alcun modo speciale; è sempre posizionato secondo il normale flusso della pagina. Il posizionamento statico come detto è l’impostazione predefinita che ottiene ogni elemento. Significa semplicemente “metti l’elemento nella sua posizione normale nel flusso del documento”.
POSITION RELATIVE
Un elemento con posizione relative è posizionato rispetto alla sua posizione normale. L’impostazione delle proprietà top, bottom, left, and right farà sì che venga spostato dalla sua posizione normale. Gli altri contenuti non verranno adattati allo spazio lasciato vuoto dall’elemento. Il posizionamento relativo è il primo tipo di posizione che esamineremo. Questo è molto simile al posizionamento statico, tranne per il fatto che una volta che l’elemento posizionato ha preso il suo posto nel flusso normale della pagina, si può modificare la sua posizione finale, inclusa la sovrapposizione ad altri elementi della pagina.
POSITION ABSOLUTE
Un elemento con posizione assoluto è posizionato rispetto all’antenato posizionato più vicino (anziché posizionato rispetto al viewport, come fisso). Tuttavia, se un elemento posizionato in modo assoluto non ha antenati posizionati, utilizza il body del documento e si sposta insieme allo scorrimento della pagina. Un elemento posizionato in modo assoluto non esiste più nel normale flusso di documenti. Invece, si trova su un proprio livello separato da tutto il resto. Questo è molto utile: significa che possiamo creare funzionalità dell’interfaccia utente isolate che non interferiscono con il layout di altri elementi nella pagina. Ad esempio, popup, menu di controllo, pannelli di rollover, funzionalità dell’interfaccia utente che possono essere trascinate e rilasciate in qualsiasi punto della pagina e così via. Top, Bottom left e right si comportano in modo diverso con il posizionamento assoluto. Piuttosto che posizionare l’elemento in base alla sua posizione relativa all’interno del normale flusso di documenti, specificano la distanza che l’elemento dovrebbe avere da ciascuno dei lati dell’elemento contenitore.
Nota: gli elementi con posizionamento assoluto vengono rimossi dal flusso normale e possono sovrapporsi agli elementi.
POSITION FIXED
Un elemento con posizione fixed è posizionato rispetto al viewport, il che significa che rimane sempre nella stessa posizione anche se si scorre la pagina. Le proprietà top, right, bottom e left vengono utilizzate per posizionare l’elemento. Un elemento fisso non lascia uno spazio vuoto nella pagina in cui sarebbe stato normalmente posizionato. Funziona esattamente allo stesso modo del posizionamento assoluto, con una differenza fondamentale: mentre il posizionamento assoluto fissa un elemento in posizione rispetto al suo antenato posizionato più vicino (il blocco contenitore iniziale se non ce n’è uno), il posizionamento fisso di solito fissa un elemento in posizione rispetto alla parte visibile della finestra. (Un’eccezione a ciò si verifica se uno degli antenati dell’elemento è un blocco contenitore fisso perché la sua proprietà di trasformazione ha un valore diverso da none). Ciò significa che è possibile creare utili elementi dell’interfaccia utente fissi, come i menu di navigazione persistenti che sono sempre visibili indipendentemente da quanto scorre la pagina.
POSITION STICKY
Un elemento con posizione appiccicoso è posizionato in base alla posizione di scorrimento dell’utente. Un elemento permanente alterna tra le posizioni relativo e fisso, a seconda della posizione di scorrimento. È posizionato relativo fino a quando non viene soddisfatta una determinata posizione di offset nella finestra; quindi, “si attacca” in posizione (come posizione: fissa).
Nota: Internet Explorer non supporta il posizionamento permanente. Safari richiede un prefisso -webkit-. È inoltre necessario specificare almeno uno dei valori top, right, bottom o left affinché il posizionamento permanente funzioni.
LA PROPRIETA’ DISPLAY
La proprietà display è la proprietà CSS più importante per il controllo del layout. Tale proprietà specifica se/come viene visualizzato un elemento. Ogni elemento HTML ha un valore di visualizzazione predefinito a seconda del tipo di elemento che può essere block o inline. Un elemento a livello di blocco (block level) inizia sempre su una nuova riga e occupa l’intera larghezza disponibile (si estende a sinistra e a destra il più possibile). Un elemento in linea (inline element) non inizia su una nuova riga e occupa solo la larghezza necessaria.
DISPLAY NONE
Display none (nessuno) è comunemente usato con JavaScript per nascondere e mostrare elementi senza eliminarli e ricrearli. L’elemento <script> usa display: none; come predefinito. Come accennato, ogni elemento ha un valore di visualizzazione predefinito. Tuttavia, tale valore si può sovrascrivere. La modifica di un elemento inline in un elemento di block level, o viceversa. Questo può essere utile per dare alla pagina un aspetto specifico e continuare a seguire gli standard web.
Nota: l’impostazione della proprietà di visualizzazione di un elemento modifica solo la modalità di visualizzazione dell’elemento, NON il tipo di elemento. Quindi, in un elemento inline con display: block; non è consentito avere altri elementi di blocco al suo interno. È possibile nascondere un elemento impostando la proprietà display su none. L’elemento verrà nascosto e la pagina verrà visualizzata come se l’elemento non fosse presente:
LA PROPRIETA’ VISIBILITY
visibility:hidden; nasconde anch’essa un elemento. Tuttavia, l’elemento occuperà ancora lo stesso spazio di prima. L’elemento sarà nascosto, ma influenzerà comunque il layout:
LA PROPRIETA’ Z-INDEX
La proprietà z-index specifica l’ordine di visualizzazione dello stack di un elemento. Quando gli elementi sono posizionati, possono sovrapporsi ad altri elementi. La proprietà z-index specifica lo stack order di un elemento (quale elemento deve essere posizionato davanti o dietro gli altri). Un elemento può avere uno stack order positivo o negativo.
Nota: z-index funziona solo su elementi posizionati in modo absolute, relative, fixed, sticky e flex items (che vedremo in seguito).
PROPRIETA’ DISPLAY CODICE DI ESEMPIO
LA PROPRIETA’ Z-INDEX CODICE DI ESEMPIO
OVERFLOW
La proprietà overflow controlla cosa succede al contenuto che è troppo grande per entrare in un’area. Specifica se ritagliare il contenuto o aggiungere barre di scorrimento quando il contenuto di un elemento è troppo grande per entrare nell’area specificata.
La proprietà overflow ha i seguenti valori:
- visible – Predefinito. L’overflow non viene ritagliato. Il contenuto viene visualizzato fuori dal riquadro dell’elemento
- hidden: l’overflow viene ritagliato e il resto del contenuto sarà invisibile
- scroll – L’overflow viene ritagliato e viene aggiunta una barra di scorrimento per vedere il resto del contenuto
- auto – Simile allo scorrimento, ma aggiunge le barre di scorrimento solo quando necessario
Nota: la proprietà overflow funziona solo per elementi block-level con un’altezza specificata.
Le proprietà overflow-x e overflow-y specificano se modificare l’overflow del contenuto solo orizzontalmente o verticalmente (o entrambi). La proprietà overflow-wrap specifica se il browser può interrompere o meno (break-line) le righe con parole lunghe, se traboccano dal suo contenitore.
FLOAT E CLEAR
- La proprietà float CSS specifica come dovrebbe fluttuare un elemento.
- La proprietà CSS clear specifica quali elementi possono fluttuare accanto all’elemento cancellato e su quale lato.
La proprietà float viene utilizzata per posizionare e formattare il contenuto, ad es. lascia che un’immagine fluttui a sinistra del testo in un contenitore. La proprietà float può avere uno dei seguenti valori:
- left – L’elemento fluttua a sinistra del suo contenitore
- right – L’elemento fluttua a destra del suo contenitore
- none – L’elemento non fluttua. Questa è l’impostazione predefinita
- inherit – L’elemento eredita il valore float del suo genitore
Quando usiamo la proprietà float e vogliamo che l’elemento successivo stia sotto (non a destra o a sinistra), dovremo usare la proprietà clear. La proprietà clear specifica cosa dovrebbe accadere con l’elemento che si trova accanto a un elemento fluttuante.
La proprietà clear può avere uno dei seguenti valori:
- none – L’elemento non viene spinto sotto gli elementi float a sinistra o a destra. Questa è l’impostazione predefinita
- left – L’elemento viene spinto sotto gli elementi float di sinistra
- right – L’elemento viene spinto sotto gli elementi float di destra
- both – L’elemento viene spinto sotto gli elementi float a sinistra e a destra
- inherit – L’elemento eredita il valore clear dal suo genitore
Se un elemento fluttuante è più alto dell’elemento contenitore, “traboccherà” al di fuori di esso. Possiamo quindi aggiungere la proprietà clearfix per risolvere questo problema.
Scrivi un commento