Una guida per comprendere e utilizzare la posizione assoluta di Divi

La proprietà della posizione assoluta è uno dei quattro principali tipi di posizione disponibili nelle nuove opzioni di posizione di Divi. In questo tutorial, esploreremo cosa significa dare a un elemento una posizione assoluta in Divi e come puoi usarlo a tuo vantaggio durante la progettazione di siti Divi.

In questo post tratteremo:

• Una panoramica dei quattro tipi di posizionamento di Divi
• Come la posizione assoluta "posiziona" un elemento in Divi
• Vantaggi e svantaggi dell'utilizzo della posizione assoluta in Divi
• Utilizzo dei punti di localizzazione con la posizione assoluta
• Esempio di caso d'uso: posizionamento dei pulsanti assolutamente per blurb della stessa altezza

Controlla!

Panoramica dei quattro tipi di posizionamento di Divi

La posizione assoluta è una delle quattro opzioni di posizione disponibili in Divi. Ecco una rapida panoramica di ciascuno di seguito.

Statico (predefinito)

Gli elementi statici tecnicamente non sono "posizionati" poiché rimangono con il normale flusso o ordine degli elementi sulla pagina e non rispondono alle proprietà superiore, destra, inferiore e sinistra come altri elementi posizionati (motivo per cui no gli offset sono disponibili in Divi per gli elementi nella posizione statica/predefinita). La posizione statica è la posizione predefinita per qualsiasi elemento CSS. In Divi, quando scegli la posizione predefinita per un modulo, stai scegliendo la posizione statica. Vale anche la pena ricordare che alcuni elementi in Divi (come righe e sezioni) avranno una posizione relativa per impostazione predefinita (non la posizione statica).

Parente

Gli elementi posizionati in modo relativo sono un po' come gli elementi statici in quanto seguono il normale flusso della pagina. La differenza principale è che gli elementi posizionati relativamente possono essere posizionati utilizzando le proprietà superiore, inferiore, sinistra e destra. Inoltre, a differenza degli elementi statici, possono essere posizionati anche utilizzando la proprietà Z Index.

Assoluto

Un elemento posizionato in modo assoluto esce dal normale flusso del documento e quindi non viene creato spazio effettivo sulla pagina per l'elemento. Puoi pensarlo come un elemento che fluttua sopra gli altri elementi della pagina che occupano spazio effettivo. Verrà posizionato rispetto al contenitore padre posizionato più vicino.

Fisso

Come la posizione assoluta, gli elementi con la posizione fissa usciranno dal normale flusso della pagina e non avranno spazio effettivo creato all'interno della pagina. La differenza chiave tra assoluto e fisso è che la posizione fissa è relativa alla finestra del browser o al viewport. In altre parole, indipendentemente da dove si trovi l'elemento all'interno del normale flusso della pagina, una volta assegnata una posizione fissa, la sua posizione sarà ora direttamente correlata alla finestra del browser. È possibile utilizzare le proprietà superiore, inferiore, sinistra e destra per posizionare l'elemento all'interno della finestra. Poiché gli elementi fissi spesso si librano dietro o davanti ad altri elementi della pagina, Z Index aiuterà a ordinare gli elementi fissi sopra gli altri.

NOTA: esiste un altro tipo di posizionamento nei CSS chiamato sticky. Un elemento posizionato in modo permanente si comporta come un elemento posizionato relativamente finché non si scorre fino al suo contenitore (ad un certo punto determinato dal valore superiore). Quindi l'elemento diventa fisso (o bloccato) finché l'utente non scorre fino alla fine del contenitore. Tuttavia, la posizione appiccicosa può essere un po' imprevedibile poiché altri fattori possono inibire la funzionalità. In Divi, l'opzione adesiva non è disponibile all'interno delle opzioni integrate per questo motivo. Tuttavia, ci sono modi per usare position:sticky in Divi.

Come la posizione assoluta "posiziona" un elemento in Divi

Come menzionato nella panoramica, un elemento posizionato in modo assoluto verrà posizionato rispetto al contenitore padre posizionato più vicino. Un contenitore padre posizionato è qualsiasi contenitore a cui viene assegnato un valore di posizione tutt'altro che statico (ad es. relativo, assoluto, fisso). Ecco perché nella maggior parte dei casi se si desidera posizionare un elemento (come un modulo) assolutamente all'interno del suo contenitore (o colonna) padre, si vorrà dare alla colonna una posizione relativa prima di posizionare in modo assoluto il modulo figlio. In caso contrario, il modulo posizionato in modo assoluto cercherà più in alto nel documento/pagina per l'antenato più vicino con una posizione diversa da statica. Per questo motivo, in Divi, le sezioni e le righe hanno entrambe la posizione relativa per impostazione predefinita in modo da poter posizionare facilmente gli elementi assolutamente all'interno di quegli elementi.

Ecco un'illustrazione di cosa farà il modulo posizionato in modo assoluto se sovrascrivo la posizione predefinita di Divi per una colonna e la imposto su statico. Nota che poiché la colonna non ha più una posizione, il modulo ora diventerà relativo alla riga che ha una posizione (relativo).

Vantaggi e svantaggi dell'utilizzo della posizione assoluta in Divi

La posizione assoluta è solo uno dei vari metodi per posizionare gli elementi. Pertanto sarebbe utile coprire alcuni dei vantaggi e degli inconvenienti derivanti dall'utilizzo della posizione assoluta invece di altri.

Benefici

Ecco alcuni vantaggi dell'utilizzo della posizione assoluta rispetto ad altre proprietà di posizionamento come Transform Translate o Margins:

Buon strumento di progettazione

Posizione assoluta Si interrompe dal flusso normale in modo che lo spazio effettivo dell'elemento non influisca sul design dopo il posizionamento. Sebbene questo possa anche essere uno svantaggio, può essere utile ogni volta che si desidera aggiungere elementi a un design già stabilito senza alcuna pulizia aggiuntiva che potrebbe essere necessaria per aggiungere ulteriore spazio al layout. In altre parole, puoi aggiungere elementi alla pagina senza dover spostare gli elementi esistenti per farlo.

Una buona alternativa a float e margini

Con la posizione assoluta, non devi dipendere da elementi mobili o utilizzare i margini per ottenere un posizionamento simile. Sebbene non sia un'opzione nativa all'interno di Divi, coloro che hanno familiarità con i CSS sanno che è possibile utilizzare i float per posizionare gli elementi a destra o a sinistra, il che in alcuni casi può essere un po' bacato e imprevedibile. Lo stesso vale per l'utilizzo dei margini per posizionare gli elementi. A volte è difficile prevedere i valori esatti dei margini per posizionare correttamente un elemento senza lasciare spazi inutili. L'utilizzo di una posizione assoluta può essere una buona alternativa al "posizionamento preciso" sia per i float che per i margini.

Buon supporto del browser

La proprietà posizione assoluta è ampiamente supportata su tutti i principali browser, quindi di solito puoi fidarti che non si romperà inaspettatamente su altri browser.

Svantaggi

Ecco alcuni inconvenienti da considerare quando si utilizza la posizione assoluta:

Rischio di isolamento

Poiché gli elementi posizionati in modo assoluto escono dal normale flusso del documento, può essere difficile aggiungere altri elementi vicino ad esso. Si isolano dagli altri elementi della pagina. Ad esempio, normalmente in Divi, se vuoi aggiungere un pulsante sotto un modulo di testo, puoi semplicemente aggiungere un modulo e risiederà automaticamente sotto il modulo di testo. Ma se il modulo di testo fosse posizionato in modo assoluto, dovresti anche posizionare il modulo pulsante in modo assoluto e quindi utilizzare le proprietà superiore, inferiore, sinistra e destra per posizionare il pulsante sotto il modulo di testo. Tuttavia, potrebbe essere più semplice posizionare una colonna (il contenitore del modulo padre) in modo assoluto in modo che tutti i moduli all'interno della colonna possano seguire il normale flusso di documenti (come posizionare un gruppo di moduli invece di uno).

Meno reattivo

Inoltre, poiché gli elementi posizionati in modo assoluto escono dal flusso del documento, può essere difficile rendere il posizionamento reattivo per i dispositivi mobili. In effetti, molti sviluppatori evitano la posizione: assoluta a causa delle sfide che derivano dal design reattivo. Pertanto, è importante utilizzare unità di lunghezza relativa (come vw o %) invece di unità di lunghezza assoluta (come px) quando necessario.

Utilizzo dei punti di localizzazione con la posizione assoluta

Le opzioni Posizione posizione integrate nel generatore Divi rendono davvero facile posizionare gli elementi semplicemente facendo clic su un punto di posizione. Una volta che il punto di posizione è stato selezionato, è possibile utilizzare gli offset verticale e orizzontale per apportare ulteriori regolazioni di posizione da quel punto di posizione.

Per impostazione predefinita, il punto di posizione sarà impostato in alto a sinistra. Quindi l'aggiunta degli offset verticale e orizzontale a quella posizione aggiungerà ulteriore spazio dall'alto e da sinistra.

Dalla posizione dell'angolo in alto a destra, l'offset verticale aggiungerà spazio dall'alto e l'offset orizzontale aggiungerà spazio a destra.

Dalla posizione dell'angolo in basso a destra, l'offset verticale aggiungerà spazio dal basso e l'offset orizzontale aggiungerà spazio a destra.

Dalla posizione dell'angolo in basso a sinistra, l'offset verticale aggiungerà spazio dal basso e l'offset orizzontale aggiungerà spazio da sinistra.

Apportare modifiche agli elementi assoluti centrati

Ogni volta che selezioni un'opzione di posizione con una posizione centrata, Divi utilizza una combinazione di proprietà CSS per assicurarsi che l'elemento sia perfettamente centrato, indipendentemente dalle dimensioni. Ad esempio, se selezioni la posizione della posizione centrata a sinistra, Divi posizionerà l'elemento come segue:

Ecco come appare il CSS nel backend.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Il top:50% è lì per posizionare la parte superiore dell'elemento esattamente al 50% dalla parte superiore del suo contenitore. La trasformazione:translateY(-50%) serve per portare l'elemento verso l'alto esattamente a metà della sua stessa altezza. Questo ti dà un elemento perfettamente posizionato, indipendentemente dall'altezza.

Questo è importante da sapere nel caso in cui si desideri apportare ulteriori regolazioni (o offset) a un elemento in posizione centrata. Non vorrai commettere l'errore di utilizzare l'opzione di conversione di trasformazione senza conoscere i valori già utilizzati. Per questo motivo, sarebbe meglio apportare modifiche più piccole utilizzando la proprietà margin in Divi invece di transform translate a meno che tu non capisca cosa stai facendo.

Utilizzo dell'opzione Trasforma Trasla per posizionare più elementi assoluti per la posizione centrata

Se capisci come viene utilizzato transform:translate, può effettivamente essere molto utile per l'offset di elementi centrati senza dover conoscere la larghezza dell'elemento.

Ad esempio, supponiamo di posizionare un modulo da centrare sia verticalmente che orizzontalmente con una colonna in Divi. Sembrerebbe questo.

Se ho dato all'elemento una trasformazione traduci come segue, non cambierà nulla:

• Trasforma Traduci (Y): -50%
• Trasforma Traduci (X): -50%

Questo perché Divi lo fa già automaticamente nel backend per te. Sapendo questo, puoi apportare modifiche dalla posizione del punto centrale utilizzando l'opzione di conversione di trasformazione. E se si utilizza l'unità di lunghezza percentuale, non è necessario conoscere la larghezza o l'altezza del modulo per apportare modifiche poiché il 100% è uguale alla larghezza o all'altezza del modulo. Quindi, se desideri aggiungere quattro moduli al centro della colonna, puoi utilizzare le opzioni di trasformazione per spostare ciascuno dei moduli posizionati in modo assoluto.

Per fare ciò, creeresti quattro moduli e darai loro una posizione assoluta con una posizione centrata verticalmente e orizzontalmente.

Quindi, utilizzare le opzioni di conversione di trasformazione per regolare la posizione dei moduli in base alla percentuale della larghezza e dell'altezza del modulo di conseguenza. Ad esempio, assegnando a un modulo un valore di trasformazione dell'asse Y di traslazione di -100% porterà il modulo verso l'alto dell'altezza esatta del modulo. Dando al modulo un valore dell'asse X di -100%, il modulo si sposterà a sinistra della larghezza esatta del modulo. Questo può essere un ottimo modo per combinare elementi che sono centrati in modo assoluto.

Esempio di caso d'uso: posizionamento dei pulsanti assolutamente per blurb della stessa altezza

Un'applicazione pratica dell'utilizzo della posizione assoluta in Divi consiste nel dare a un pulsante una posizione assoluta all'interno di una colonna in modo che il pulsante rimanga nella parte inferiore della colonna anche se la quantità (o l'altezza) del contenuto sopra di esso può cambiare. Questo può essere un ottimo modo per mantenere il design coerente quando presenti elementi sulla tua pagina.

Ecco come farlo.

Innanzitutto, aggiungi una riga a una colonna alla sezione.

Quindi aggiungi un modulo blurb alla colonna.

Quindi, aggiungi un modulo pulsante sotto il modulo blurb.

Apri le impostazioni della riga e duplica la colonna due volte per ottenere un totale di tre colonne identiche ciascuna con lo stesso blurb e modulo pulsante.

Quindi vai alle impostazioni delle righe e seleziona l'opzione per equalizzare le altezze delle colonne. Ciò assicurerà che le colonne si adattino all'altezza della colonna con l'altezza maggiore (o la maggior parte del contenuto).

Ora aggiorna il contenuto del corpo di ciascuno dei moduli blurb in modo che la quantità di contenuto differisca con ciascuna colonna. Dovresti vedere che il pulsante in basso si sposterà nella posizione direttamente sotto il modulo blurb, posizionando ciascuno dei pulsanti in una posizione diversa all'interno della colonna.

Utilizzando la selezione multipla, seleziona ciascuno dei moduli pulsante e aggiorna le seguenti impostazioni degli elementi per ciascuno dei pulsanti:

• Posizione: Assoluta
• Posizione: in basso a sinistra

Questo posizionerà ciascuno dei pulsanti assolutamente nella parte inferiore sinistra della colonna. Ma poiché i pulsanti sono ora al di fuori del normale flusso degli elementi sulla pagina, noterai che c'è una certa sovrapposizione con il pulsante e il modulo blurb nella colonna all'estrema sinistra. Per risolvere questo problema, dobbiamo semplicemente creare uno spazio effettivo per il pulsante aggiungendo un po' di riempimento alla colonna come segue:

• Imbottitura: 50px in basso

Ora hai tre elementi in primo piano con un posizionamento coerente dei pulsanti per ciascuno, anche se la quantità di contenuto (o l'altezza del blurb) potrebbe cambiare.

Pensieri finali

Spero che questo post abbia fatto luce sulla proprietà della posizione assoluta e su quanto potente possa essere utilizzata all'interno di Divi. Una volta compreso come funziona la posizione, puoi utilizzare per aggiungere tutti i tipi di elementi di design precisi che porteranno il tuo sito Web al livello successivo.

Non vedo l'ora di sentirti nei commenti.

Saluti!