Il posizionamento CSS è stato a lungo una parte importante della creazione di layout di siti Web. Anche con l'aumento delle tecniche di layout CSS come Flexbox e CSS Grid, il posizionamento ha ancora un posto importante nella borsa dei trucchi di qualsiasi web designer.
Quando si utilizza il posizionamento CSS, la prima cosa che devi fare è stabilire la proprietà CSS per la posizione per dire al browser se stai per utilizzare il posizionamento assoluto o relativo per un determinato elemento. Devi anche capire la differenza tra queste due proprietà di posizionamento.
Mentre assolute e relative sono le due proprietà di posizione CSS usate più spesso nel web design, ci sono in realtà quattro stati per la proprietà position:
- statico
- assoluto
- parente
- fisso
Posizionamento statico
Statico è la posizione predefinita per qualsiasi elemento in una pagina Web. Se non si definisce la posizione di un elemento, è statico, il che significa che viene visualizzato sullo schermo in base a dove si trova nel documento HTML e come viene visualizzato all'interno del normale flusso di quel documento.
Se si applicano regole di posizionamento come superiore o sinistra a un elemento che ha una posizione statica, quelle regole vengono ignorate e l'elemento rimane dove appare nel normale flusso di documenti. Raramente, se mai, è necessario impostare un elemento in una posizione statica in CSS perché è il valore predefinito.
Posizionamento CSS assoluto
Il posizionamento assoluto è probabilmente la posizione CSS più semplice da capire. Si inizia con questa proprietà di posizione CSS:
posizione: assoluta;
Questo valore indica al browser che qualsiasi cosa verrà posizionata deve essere rimossa dal normale flusso del documento e posizionata in una posizione esatta nella pagina. Questo è calcolato sulla base dell'antenato più vicino posizionato in modo non statico di quell'elemento. Poiché un elemento posizionato in modo assoluto viene rimosso dal flusso normale del documento, influisce sul modo in cui gli elementi prima o dopo di esso nell'HTML sono posizionati sulla pagina Web. Ad esempio, se si dispone di una divisione posizionata utilizzando un valore relativo e all'interno di tale divisione, si dispone di un paragrafo che si desidera posizionare 50 pixel dalla parte superiore della divisione, si aggiunge un valore di posizione di assoluto a quel paragrafo insieme a un valore di offset di 50px sul superiore proprietà, come questo: posizione: assoluta;top: 50px;
Questo elemento posizionato in modo assoluto mostra sempre 50 pixel dalla parte superiore di quella divisione posizionata in modo relativo, indipendentemente da ciò che mostra il flusso normale. Il tuo elemento posizionato in modo assoluto usa quello relativamente posizionato come contesto, e il valore di posizionamento che usi è relativo a quello. Le quattro proprietà di posizionamento che hai a disposizione sono: Puoi usare entrambi superiore o parte inferiore - Dal momento che un elemento non può essere posizionato in base a entrambi questi valori - e neanche destra o sinistra. Se un elemento è impostato su una posizione assoluta, ma non ha antenati posizionati in modo non statico, viene posizionato rispetto all'elemento body, che è l'elemento di livello più alto della pagina. Il posizionamento relativo utilizza le stesse quattro proprietà di posizionamento del posizionamento assoluto, ma invece di basare la posizione dell'elemento sul suo antenato più vicino non posizionato staticamente, inizia da dove sarebbe l'elemento se fosse ancora nel flusso normale. Ad esempio, se nella tua pagina web hai tre paragrafi e il terzo ha a posizione: relativa posizionato su di esso, la sua posizione viene spostata in base alla posizione corrente. Paragrafo 1. Paragrafo 2. Paragrafo 3. Nell'esempio sopra, il terzo paragrafo è posizionato 2em dal lato sinistro dell'elemento contenitore ma ancora al di sotto dei primi due paragrafi. Resta nel flusso normale del documento ed è leggermente sfalsato. Se lo cambi a posizione: assoluta, tutto ciò che segue lo mostra in cima perché non è più nel normale flusso del documento. Gli elementi di una pagina Web vengono spesso utilizzati per impostare un valore di posizione: relativa senza il valore di offset stabilito, il che significa che l'elemento rimane esattamente dove apparirà nel flusso normale. Questo viene fatto solo per stabilire quell'elemento come un contesto rispetto al quale altri elementi possono essere posizionati in modo assoluto. Ad esempio, se hai una divisione che circonda l'intero sito web con un valore di classe di contenitore, che è uno scenario comune nel web design, quella divisione può essere impostata su una posizione di parente in modo che qualsiasi cosa al suo interno possa utilizzarlo come contesto di posizionamento. Il posizionamento fisso è molto simile al posizionamento assoluto. La posizione dell'elemento viene calcolata nello stesso modo del modello assoluto, ma gli elementi fissi vengono quindi fissati in quella posizione, quasi come una filigrana. Tutto il resto della pagina scorre quindi oltre quell'elemento. Per utilizzare questo valore di proprietà, imposti: posizione: fissa;
Tieni presente che, quando aggiusti un elemento sul tuo sito, viene stampato in quella posizione quando viene stampata la tua pagina web. Ad esempio, se il tuo elemento è fisso nella parte superiore della pagina, verrà visualizzato nella parte superiore di ogni pagina stampata perché è fissato nella parte superiore della pagina. È possibile utilizzare i tipi di supporto per modificare il modo in cui le pagine stampate visualizzano gli elementi fissi: @media screen { h1 # first {position: fixed; } } @media print { h1 # first {position: static; } }
Posizionamento relativo
Che ne è del posizionamento fisso?
