CSS posizionamento

L'attributo di posizionamento di CSS (Positioning) ti permette di posizionare gli elementi.

CSS posizionamento e float

CSS fornisce alcune proprietà per il posizionamento e il float, utilizzando queste proprietà, è possibile costruire un layout a colonne, sovrapporre una parte del layout con un'altra parte, e può anche completare il compito che in passato richiedeva l'uso di più tabelle.

L'idea di base della posizionamento è molto semplice, ti permette di definire la posizione in cui dovrebbe apparire la scatola dell'elemento rispetto alla sua posizione normale, o rispetto al padre dell'elemento, a un altro elemento o persino alla finestra del browser stessa. Chiaramente, questa funzione è molto potente e sorprendente. Per sapere, l'utente agente supporta la posizionamento di CSS2 molto meglio rispetto ad altri aspetti, non dovrebbe sorprendere.

D'altro canto, CSS1 per la prima volta ha proposto il float, basato su una funzione aggiunta da Netscape durante l'inizio dello sviluppo del Web. Il float non è completamente posizionato, tuttavia, naturalmente non è nemmeno un layout di flusso normale. Spiegheremo chiaramente il significato del float nei capitoli successivi.

Tutto è una scatola

Gli elementi div, h1 o p sono spesso chiamati elementi bloccanti. Questo significa che questi elementi vengono visualizzati comeUn contenuto di bloccoovvero “riquadro bloccante”. Al contrario, elementi come span e strong vengono chiamati “elementi inline”, poiché il loro contenuto viene visualizzato nella riga, ossia nel “riquadro inline”.

È possibile utilizzare Attributo displayModificare il tipo di riquadro generato. Questo significa che impostando l'attributo display su block, è possibile far apparire un elemento inline (ad esempio, l'elemento <a>) come un elemento bloccante. È anche possibile impostare display su none, in modo che l'elemento generato non abbia alcun riquadro. In questo modo, il riquadro e tutto il suo contenuto non vengono visualizzati e non occupano spazio nel documento.

Ma in un caso, anche senza una definizione esplicita, viene creato un elemento bloccante. Questo accade quando si aggiunge del testo all'inizio di un elemento bloccante (ad esempio, div). Anche se non si definisce questi testi come paragrafi, vengono trattati come tali:

<div>
testi
<p>Altri testi.</p>
</div>

In questo caso, il riquadro viene chiamato riquadro anonimo bloccante, poiché non è associato a un elemento definito esplicitamente.

Il testo delle righe degli elementi bloccanti subisce una situazione simile. Supponiamo di avere un paragrafo che contiene tre righe di testo. Ogni riga di testo forma un riquadro anonimo. Non è possibile applicare uno stile direttamente a un blocco anonimo o a un riquadro di riga, poiché non c'è un luogo dove applicare lo stile (notare che il riquadro della riga e il riquadro inline sono due concetti diversi). Tuttavia, questo aiuta a comprendere che tutto ciò che vediamo sullo schermo forma qualche tipo di riquadro.

Meccanismi di posizionamento CSS

CSS ha tre meccanismi di posizionamento di base: flusso normale, flottamento e posizionamento assoluto.

Salvo che non venga specificato esplicitamente, tutti i riquadri vengono posizionati nel flusso normale. Questo significa che la posizione degli elementi nel flusso normale è determinata dalla posizione degli elementi nel (X)HTML.

I riquadri bloccanti sono disposti uno accanto all'altro dall'alto in basso, e la distanza verticale tra i riquadri è calcolata in base ai margini verticali esterni dei riquadri.

I riquadri inline vengono disposti orizzontalmente in una riga. È possibile regolare la spaziatura tra di loro utilizzando il margine interno orizzontale, i bordi e i margini esterni. Tuttavia, i margini interni, i bordi e i margini esterni non influenzano l'altezza del riquadro inline. Il riquadro orizzontale formato da una riga viene chiamatoRiquadro della riga (Line Box)L'altezza del riquadro della riga è sempre sufficiente per contenere tutti i riquadri inline contenuti. Tuttavia, impostare l'altezza della riga può aumentare l'altezza di questo riquadro.

Nei prossimi capitoli, vi spiegheremo in dettaglio la posizionamento relativo, assoluto e flottante.

Proprietà position CSS

Utilizzando Attributo positionpossiamo scegliere 4 tipi diversi di posizionamento, che influenzano il modo in cui viene generato il riquadro dell'elemento.

Il significato del valore dell'attributo position:

static
Il riquadro dell'elemento viene generato normalmente. Gli elementi bloccanti generano un riquadro rettangolare come parte del flusso del documento, mentre gli elementi inline creano uno o più riquadri di riga, posizionati all'interno dell'elemento genitore.
relative
La casella dell'elemento si sposta di una certa distanza. L'elemento mantiene la sua forma non posizionata, e lo spazio originale occupato viene mantenuto.
absolute
La casella dell'elemento viene completamente rimossa dal flusso del documento e posizionata rispetto al blocco contenente. Il blocco contenente può essere un altro elemento nel documento o il blocco contenente iniziale. Lo spazio originale occupato dall'elemento nel flusso normale viene chiuso, come se l'elemento non esistesse. Dopo la posizionamento, viene generata una casella di blocco, indipendentemente dal tipo di casella generata originariamente nel flusso normale.
fixed
La comportamento della casella dell'elemento è simile a impostare position su absolute, ma il blocco contenente è la finestra stessa.

Suggerimento:Il posizionamento relativo viene considerato parte del modello di posizionamento del flusso normale, perché la posizione dell'elemento è relativa alla sua posizione nel flusso normale.

Esempio

Posizionamento: Posizionamento relativo
Questo esempio dimostra come posizionare un elemento rispetto alla posizione normale dell'elemento.
Posizionamento: Posizionamento assoluto
Questo esempio dimostra come posizionare un elemento utilizzando valori assoluti.
Posizionamento: Posizionamento fisso
Questo esempio dimostra come posizionare un elemento rispetto alla finestra del browser.
Impostazione dell'edge superiore dell'immagine utilizzando un valore fisso
Questo esempio dimostra come impostare l'edge superiore dell'immagine utilizzando un valore fisso.
Impostazione dell'edge superiore dell'immagine utilizzando un valore percentuale
Questo esempio dimostra come impostare l'edge superiore dell'immagine utilizzando un valore percentuale.
Impostazione dell'edge inferiore dell'immagine utilizzando un valore in pixel
Questo esempio dimostra come impostare l'edge inferiore dell'immagine utilizzando un valore in pixel.
Impostazione dell'edge inferiore dell'immagine utilizzando un valore percentuale
Questo esempio dimostra come impostare l'edge inferiore dell'immagine utilizzando un valore percentuale.
Impostazione dell'edge sinistro dell'immagine utilizzando un valore fisso
Questo esempio dimostra come impostare l'edge sinistro dell'immagine utilizzando un valore fisso.
Impostazione dell'edge sinistro dell'immagine utilizzando un valore percentuale
Questo esempio dimostra come impostare l'edge sinistro dell'immagine utilizzando un valore percentuale.
Impostazione dell'edge destro dell'immagine utilizzando un valore fisso
Questo esempio dimostra come impostare l'edge destro dell'immagine utilizzando un valore fisso.
Impostazione dell'edge destro dell'immagine utilizzando un valore percentuale
Questo esempio dimostra come impostare l'edge destro dell'immagine utilizzando un valore percentuale.
Come utilizzare le barre di scorrimento per visualizzare il contenuto overflow all'interno dell'elemento
Questo esempio dimostra come impostare l'attributo overflow per determinare l'azione quando il contenuto dell'elemento è troppo grande per adattarsi all'area specificata.
Come nascondere il contenuto sovraccaricato negli elementi overflow
Questo esempio dimostra come impostare l'attributo overflow per nascondere il contenuto quando il contenuto dell'elemento è troppo grande per adattarsi all'area specificata.
Come impostare il browser per gestire automaticamente il sovraccarico
Questo esempio dimostra come impostare il browser per gestire automaticamente il sovraccarico.
Impostazione della forma degli elementi
Questo esempio dimostra come impostare la forma degli elementi. Questo elemento viene ritagliato all'interno di questa forma e visualizzato.
Posizionamento verticale dell'immagine
Questo esempio dimostra come posizionare verticalmente un'immagine nel testo.
Z-index
Z-index può essere utilizzato per posizionare un elemento dopo un altro.
Z-index
Gli elementi nell'esempio sopra hanno cambiato il valore di Z-index.

Proprietà di posizionamento CSS

Le proprietà di posizionamento CSS ti permettono di posizionare gli elementi.

Proprietà Descrizione
position Posizionare un elemento in una posizione statica, relativa, assoluta o fissa.
top Definisce la deviazione dal margine superiore esterno dell'elemento posizionato rispetto al margine superiore del blocco contenente.
right Definisce la deviazione dal margine esterno destro dell'elemento posizionato rispetto al margine destro del blocco contenente.
bottom Definisce la deviazione dal margine inferiore esterno dell'elemento posizionato rispetto al margine inferiore del blocco contenente.
left Definisce la deviazione dal margine esterno sinistro dell'elemento posizionato rispetto al margine sinistro del blocco contenente.
overflow Impostare cosa accade quando il contenuto dell'elemento supera la sua area.
clip Impostare la forma degli elementi. Gli elementi vengono tagliati in questa forma e poi visualizzati.
vertical-align Impostare il metodo di allineamento verticale degli elementi.
z-index Impostare l'ordine di sovrapposizione degli elementi.