Comprensione e utilizzo della posizione relativa in Divi

La proprietà position relativa è forse il più misterioso dei tipi position. Tuttavia, una volta compreso come funziona, possiamo usarlo a nostro vantaggio durante la progettazione di un sito in Divi. Quello che scopriamo potrebbe sorprenderti.

In questo post tratteremo:

• Una panoramica dei quattro tipi di posizionamento di Divi
• Come la posizione relativa "posiziona" un elemento in Divi
• 5 motivi per utilizzare la posizione relativa in Divi
• Posizione relativa vs. margine
• Posizione relativa vs. Trasforma Trasla

Controlla!

Panoramica dei quattro tipi di posizionamento di Divi

La posizione relativa è uno dei quattro tipi 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). In Divi, quando scegliamo la posizione predefinita per un modulo, scegliamo 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. Possiamo 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. Possiamo usare le proprietà top, bottom, left e right 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 persistente si comporta come un elemento posizionato relativamente finché non si scorre 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 Relativa “posiziona” un elemento in Divi

Come accennato nella panoramica, il tipo di posizione relativa è simile alla "posizione" statica perché l'elemento rimane nel flusso normale del documento (l'HTML sulla pagina). La vera differenza è che una volta assegnato un elemento con la posizione relativa, ora ha nuove opzioni disponibili per posizionare l'elemento. Queste opzioni includono le proprietà superiore, inferiore, sinistra e destra, nonché la proprietà Indice Z.

In Divi, queste opzioni di posizione aggiuntive possono essere trovate nel gruppo di opzioni di posizione una volta selezionata la posizione relativa.

Utilizzo degli offset con la posizione relativa

I valori Offset Origin e Offset lavoreranno insieme per posizionare il nostro elemento ovunque desideriamo all'interno del contenitore padre. In questo esempio, abbiamo un modulo che ha una posizione relativa, un offset in alto a sinistra, un offset verticale di 25 px e un offset orizzontale di 25 px. Notare come i valori di offset allontaneranno l'elemento dall'origine di offset orizzontalmente e/o verticalmente.

Ecco lo stesso modulo con gli stessi offset ma con un'origine offset in alto a destra.

Ecco lo stesso modulo con gli stessi offset e un'origine offset in basso a destra.

Ed ecco lo stesso modulo con gli stessi offset e un'origine offset in basso a sinistra.

Nessuna sorpresa di spaziatura

Con il posizionamento relativo, lo spazio effettivo dell'elemento rimane nella sua posizione originale dopo che l'elemento è stato spostato utilizzando gli offset (alto, basso, sinistra, destra). La nuova posizione dell'elemento non si sposta né influisce sulla spaziatura del resto degli elementi sulla pagina. Fondamentalmente aleggia sugli altri elementi come uno spirito che ha lasciato il suo corpo.

Motivi per utilizzare la posizione relativa

#1 Per eseguire il rendering di un contenitore padre per elementi posizionati in modo assoluto

Questa è probabilmente l'applicazione più popolare del tipo di posizione relativa. Poiché ogni elemento posizionato in modo assoluto è relativo all'antenato posizionato più vicino, possiamo scegliere di rendere uno dei suoi antenati un elemento posizionato semplicemente assegnandogli una posizione relativa (la posizione statica predefinita non è tecnicamente "posizionata"). Ciò mantiene il flusso del documento in posizione (come statico) e ci consente di scegliere un contenitore per gli elementi assoluti.

#2 Per spostare gli elementi senza influire sugli altri elementi della pagina.

Con la posizione relativa, possiamo usare gli offset per spostare gli elementi in allineamento senza influenzare altri elementi. E con Divi, possiamo sfruttare l'interfaccia utente trascinabile per posizionare gli elementi visivamente in tempo reale.

#3 Per utilizzare l'indice Z per sovrapporre altri elementi

Per impostazione predefinita, gli elementi statici non possono essere riordinati nell'asse z a meno che non venga data la posizione relativa. Una volta nella posizione relativa, l'elemento rimarrà posizionato nel normale flusso del documento. Solo ora abbiamo la possibilità di sfruttare l'indicizzazione Z per posizionare gli elementi in un ordine particolare quando si sovrappongono l'uno all'altro.

#4 Per evitare di utilizzare il margine negativo per scopi di posizione

Il posizionamento relativo lascerà indietro lo spazio della sua posizione originale. Tuttavia, con un margine negativo, vengono riposizionati sia il contenuto che il suo spazio originale. Ad esempio, se aggiungiamo un margine superiore negativo a una riga in Divi in ​​modo che la riga si sovrapponga alla riga sopra di essa, tutte le righe/il contenuto si sposteranno con esso. Questo lascia un po' di confusione da ripulire che potrebbe essere evitata usando invece gli offset di posizione relativi.

Ecco un'illustrazione di cosa succede quando usiamo un margine superiore negativo per spostare un modulo verso l'alto. Nota come il resto degli elementi sottostanti viene allevato con esso.

Se diamo allo stesso modulo una posizione relativa, possiamo usare l'offset verticale per portare il modulo verso l'alto senza che influisca sul resto della spaziatura sulla pagina.

Anche se ho usato spesso un margine negativo per posizionare gli elementi in Divi, probabilmente non è una buona idea se possiamo usare invece il posizionamento relativo. Il margine si riferisce al modulo box dell'elemento, quindi è davvero pensato per aggiungere spaziatura all'interno e intorno all'elemento stesso, non tanto per posizionare l'offset dell'elemento dal suo contenitore genitore come con il posizionamento relativo.

Posizione relativa vs Trasforma Traduci

La posizione relativa è molto simile all'utilizzo di Transform translate per posizionare gli elementi su una pagina. Entrambi spostano l'elemento lasciando lo spazio effettivo nella sua posizione originale e senza influenzare gli altri elementi della pagina.

La traduzione è migliore per l'animazione e le transizioni (come gli effetti al passaggio del mouse)

Tuttavia, sembra che la traduzione sia la soluzione migliore per l'animazione e le transizioni (come gli effetti al passaggio del mouse) perché fornisce transizioni più rapide e fluide. L'uso degli offset superiore, inferiore, sinistro e destro per animare o eseguire la transizione di un elemento relativo potrebbe essere più discontinuo e potrebbe far lavorare il nostro browser più del necessario.

Le unità di lunghezza relativa rispondono in modo diverso

Se utilizziamo unità di lunghezza relativa (come % o vw) per il design reattivo, queste funzioneranno in modo diverso con la posizione relativa e trasformiamo la traduzione.

Un modulo Divi con una posizione relativa e un offset orizzontale del 50% sposterà il modulo orizzontalmente di una quantità pari al 50% della larghezza del contenitore genitore (o colonna).

Un modulo Divi con una traslazione di trasformazione (asse X) del 50% sposterà il modulo orizzontalmente di una quantità pari al 50% della larghezza del modulo stesso.

Combinazione di posizione relativa e trasformazione Trasla in elementi centrali

Come abbiamo appena visto, la posizione relativa è relativa al genitore e la proprietà translate translate è relativa all'elemento stesso. Per questo motivo, possiamo usare entrambi in combinazione per posizionare gli elementi nel modo desiderato. Possiamo anche usare questa tecnica per centrare gli elementi nel loro contenitore.

Ad esempio, possiamo utilizzare l'offset orizzontale della posizione relativa per posizionare il modulo a destra esattamente al 50% della larghezza della colonna.

Quindi utilizzare la proprietà translate per spostare il modulo del 50% (della larghezza del modulo) a sinistra. Ciò assicurerà che il modulo rimanga al centro della colonna, indipendentemente dalla larghezza del modulo.

Pensieri finali

Se sei come me prima di scrivere questo articolo, probabilmente non hai capito o non hai usato molto bene il tipo di posizione relativa. Forse l'aspetto più sorprendente di questa posizione relativa è il modo in cui influisce (o non influisce) sul resto del design sulla pagina. Non solo funziona in tandem con gli elementi assoluti, ma funziona anche bene con la trasformazione trasla per posizionare gli elementi nel punto perfetto.

Qual è stata la tua esperienza con il tipo di posizione relativa?

Non vedo l'ora di sentirti nei commenti.

Saluti!