Un indice Z è un attributo CSS che colpisce l'ordine di impilamento verticale di componenti HTML sovrapposti, facendoli guardare più vicini allo spettatore.
Gli elementi dell'indice superiore sono impilati sopra elementi di indice inferiore. L'indice Z funziona sulla maggior parte degli elementi posizionati, come un assoluto, relativo, fisso, appiccicoso e ereditario. La proprietà di posizione consente di modificare il posizionamento di un componente.
Perché usare Z-Index?
I componenti possono sovrapporsi per una serie di motivi, incluso quando il posizionamento relativo lo spinge su un altro, un bordo negativo ha trascinato il componente su un altro o quando un componente allineato si sovrappone.
I componenti si accumulano nell'ordine che appaiono nel DOM senza un valore di indice z. Gli elementi non statici appaiono sempre in cima al posizionamento statico predefinito. Il nidificazione svolge anche una funzione importante. Ad esempio, se il componente A si trova sul componente B, un elemento figlio del componente B non può mai essere più alto del componente A.
Proprietà di posizione Z-indice
Diversi parametri di posizione determinano la scelta della strategia di posizionamento degli elementi da parte di un web designer. La proprietà di posizione deve essere definita per ciascun oggetto che si desidera trasferirsi con un indice Z, che è uno dei motivi per cui l'indice Z può essere complesso.
Gli attributi superiore, in basso, a destra e sinistra vengono utilizzati per posizionare elementi. Le proprietà, tuttavia, non funzionano fino a quando la proprietà di posizione non è impostata. Inoltre, in base al valore della posizione, le proprietà si comportano in modo diverso.
L'indice Z funziona con valori a sei posizioni, come precedentemente affermato. Diamo un'occhiata a ciascuno di essi.
- Assoluto
L'elemento viene rimosso dal flusso del documento e altri elementi agiscono come se non fosse lì, con tutte le proprietà posizionali che lo influenzano.
- Parente
La posizione originale di un elemento rimane nel flusso del documento, ma ora le funzioni sinistra/destra/superiore/inferiore/indice Z. Gli attributi posizionali indicano la posizione dell'elemento "spento" in quella direzione.
- Fisso
L'elemento è posizionato rispetto alla finestra del browser effettivo dell'utente; Pertanto, lo scorrimento non ha alcun effetto.
- Appiccicoso
Il valore dell'elemento viene visualizzato come relativo fino a quando la posizione di scorrimento di ViewPort non colpisce una certa soglia. L'elemento ora prende un posto fisso in cui viene chiesto di rimanere.
- Ereditare
Poiché i valori di posizione non includono Cascade, possono essere utilizzati per costringerlo a farlo e ad acquisire il valore di posizionamento del genitore.
Come usare il indice z in elementor?
In Element, è possibile utilizzare Z-Index andando al menu Impostazioni avanzate di qualsiasi componente o elemento e fornendo un valore per esso. È un pezzo di torta!
Ricorda che se hai intenzione di impiegare molti livelli, dovrai tenere un registro di ogni indice Z. Puoi progettare sezioni sovrapposte abbastanza intricate, come vedremo nella sezione successiva, ma sapere quale valore di indica Z viene dato a quale elemento rende le cose molto più semplici.
Conclusione
Spero che tu abbia trovato una comprensione di base di come utilizzare il indice Z per il tuo web design di WordPress Element. Non dimenticare di raggiungere in caso di ulteriori domande. Inoltre, conoscere articoli correlati sulle migliori pratiche di WordPress, tecniche di risoluzione dei problemi e altri suggerimenti sulla nostra pagina del blog .
Tuttavia, noi di Seahawk Media forniamo il meglio di tutti i servizi per soddisfare le tue esigenze di WordPress end-to-end. Contattaci del blog per ulteriori approfondimenti.
