Z-index

Questo è un problema comune ma molto facile da gestire quando si utilizza Navi+. Il tuo sito web potrebbe avere molti elementi flottanti—guarda gli esempi qui sotto per riconoscerli.

Note: These are the current z-index setups on the Dawn theme (Shopify’s most popular free default theme) at this time.

Questi elementi flottanti sono controllati dai propri valori di z-index. Maggiore è lo z-index, maggiore è la priorità che quell’elemento ha nel essere visualizzato sopra gli altri. La parte complicata è che non ci sono regole fisse per i valori di z-index. Puoi assegnare qualsiasi numero fino a 2.147.483.647. Ogni tema che utilizzi e ogni app in esecuzione sul tuo negozio Shopify possono assegnare il proprio z-index ai componenti flottanti—di solito basato sulla preferenza dello sviluppatore. Quando questi elementi interagiscono sul tuo sito web, potrebbero sovrapporsi in modi imprevisti.

Divertiamoci un po’ :joy:: Dai un’occhiata più da vicino allo screenshot qui sopra e vedrai—sì, è un pasticcio, e non ci sono assolutamente regole. Ci sono tre sviluppatori dietro il sito web che stai guardando.

Lo sviluppatore che ha costruito il tema Dawn ha scelto uno z-index di 3 per il Menu Panel e 1000 per il Cart Panel—completamente non correlati, senza una logica chiara.

Poi c’è lo sviluppatore dell’app Rivo Loyalty Rewards—uno strumento di fidelizzazione popolare—che ha scelto uno z-index di 99999999999, probabilmente senza nemmeno contare quanti nove ha digitato. Il loro unico obiettivo: assicurarsi che il pulsante flottante “Rewards” rimanga sempre in cima, a prescindere da tutto, anche sopra il tuo Cart Panel.

Nel frattempo, lo sviluppatore di Navi+ ha umilmente scelto un numero più piccolo—solo 5—perché non volevamo essere troppo aggressivi o invadenti. Quindi, cosa dovresti fare?

Passo 1: Trova il corretto z-index del tuo menu Navi+

Metodo 1: Chiedi supporto a Navi+ (Il più semplice)

Questo è il modo migliore e più efficace. Possiamo fornirti informazioni sui valori di z-index degli elementi chiave dell'interfaccia come il Menu Panel, il Cart Panel e qualsiasi app di terze parti che stai utilizzando, quindi raccomandare la migliore impostazione di z-index per il tuo caso.

Non esitare a utilizzare la chat in basso a destra dello schermo per parlare con un sostenitore di Navi+. Navi+ sta crescendo e apprezziamo davvero il tuo feedback—i tuoi problemi ci aiutano a costruire un prodotto migliore.

Non siamo online 24 ore su 24, 7 giorni su 7—solo 14 ore al giorno, in base al fuso orario del Vietnam. Tuttavia, non appena vediamo il tuo messaggio, risponderemo subito.

Metodo 2: Usa la modalità Ispeziona del tuo browser (dettagliato, ma richiede alcune conoscenze tecniche)

Finora, non c'è modo migliore per controllare questo da solo a meno che tu non utilizzi la modalità Ispeziona. Questo strumento per sviluppatori è disponibile in tutti i browser moderni come Chrome, Firefox, Safari o Edge. Fai clic destro in qualsiasi punto del tuo sito web e seleziona Ispeziona per aprire la modalità Ispeziona.

Metodo 3: Prova e testa in base ai nostri suggerimenti (Esperienza personale)

Nella maggior parte dei casi, i problemi di z-index sono rari se non stai utilizzando troppe app. Il problema principale di solito deriva dalle sovrapposizioni tra il tuo menu e altri elementi dell'interfaccia come il Menu Panel o il Cart Panel.

  • Per i menu appiccicosi di Navi+ come Tabbar o FAB: Ti consigliamo di mantenere lo z-index basso, intorno a 2 o 3. Questi menu occupano spazio sullo schermo e sarebbe scomodo o fastidioso se coprissero pannelli funzionali come il carrello.
  • Per i menu di sezione di Navi+ come i Mega menu: Se posizionati in alto (nell'intestazione), puoi impostare in sicurezza uno z-index molto alto (ad es. 2000000000) per assicurarti che il sottomenu a discesa non sia nascosto dietro altri componenti.
  • Per i menu Grid di Navi+: lo z-index non ha effetto, poiché il menu è piatto e non ha profondità stratificata.
  • Per i menu Slide di Navi+: lo z-index dovrebbe essere impostato molto alto (ad es. 2000000000) per evitare di essere nascosto dietro altri elementi.

Passo 2: Aggiorna lo z-index del tuo menu Navi+

Come aggiornare lo z-index del menu Navi+?

Seleziona il menu Avanzato e scorri verso il basso per trovare la scheda Z-index, quindi aggiorna lo z-index e non dimenticare di fare clic su SALVA per applicare le modifiche.