Inserimento di pulsanti e collegamenti sullo script particles.js (Z-index)

Question

Sto tentando di utilizzare lo script particles.js, quindi le particelle galleggeranno sull'intera pagina (con sfondo trasparente). Ho bisogno di tirare alcuni link e pulsanti sopra le particelle, in modo che fossero cliccabili.

Riguardo a link, sono in grado di inserire un elemento "C" grande sopra un elemento "B" grande con un elemento "b" piccolo sopra l'elemento "C" grande?

Quello che stavo pensando è che relativo significa z-index relativo al suo genitore mentre se avessi impostato tutti gli elementi in assoluto, visualizzando la piccola "b" sulla grande "C" sarebbe possibile, ma non lo è. Qualcuno può spiegarlo per me?

<div id="A">A<div id="a">a</div></div> 
<div id="B">B<div id="b">b</div></div> 
<div id="C">C<div id="c">c</div></div> 

Answer 1

La posizione non si riferisce allo z-index. Si riferisce alla posizione x, y sullo schermo. Leggi informazioni sulla proprietà di posizione css here.

z-index è solo la posizione assoluta sull'asse z. Pertanto un indice più alto si impila su un valore inferiore.

La posizione ha tuttavia un effetto sull'asse z per le div all'esterno del div, poiché valori diversi implicano ordini di rendering diversi. Puoi vedere questo effetto se apri gli strumenti di sviluppo di Chrome sulla pagina che hai fornito e modifica A da statico a relativo.

Sebbene A abbia un indice di 37, sarà sopra B perché viene eseguito il rendering dopo che A. Affinché z-index funzioni in modo affidabile, è necessario raggrupparli l'uno nell'altro.

Se apri l'esempio di particella codepen e apri gli strumenti di sviluppo di Chrome puoi vedere come la scatola FPS si comporta in modo strano se fai clic sui dettagli. Questo è perché è al di fuori del div particle.js.

In sintesi, se vuoi vedere cosa sta succedendo, usa qualcosa come gli strumenti di sviluppo in chrome. Firefox, Opera e IE hanno strumenti simili.

Ecco un esempio funzionante su codepen. Aggiungere la classe al vostro CSS e mettere il div sulla pagina:

.test { 
    index: 50; 
    top: 100px; 
    position: absolute; 
} 

Answer 2

Quello che vorrei suggerire è, dare un alto valore z-index per il vostro a (ad es z-index:9999;), ma assicurarsi che gli elementi padre di a non avere valori di z-index più piccoli perché lo z-index di un elemento sarà limitato dal valore impostato dal suo genitore.

Quindi per la vostra domanda "io sono in grado di mettere grande '' elemento su grande 'C B' elemento pur avendo piccola '' elemento sopra la grande 'b C' elemento?", la risposta è non perché lo z-index del tuo piccolo elemento "b" sarebbe limitato dal suo genitore, che è il grande elemento "B" e quel grande elemento "B" è sotto l'elemento "C".

Here's a working sample con un .container che mostra sotto le particelle mentre il collegamento funziona pure.Ciò che conta è che si dovrebbe avere questo:

a{ 
    position:relative; 
    z-index:9999; 
} 

E assicurarsi che il genitore (in questo caso, il .container) deve avere un valore z-index del 9999 o superiore (o qualsiasi valore maggiore di z-index di il modello), altrimenti limiterà lo z-index di a e se è inferiore a z-index del pattern, i pulsanti non saranno cliccabili.

Se si dispone di pulsanti con sfondi solidi, consiglio impostare lo stile su uno pseudo-elemento per a con minore z-index per consentire modelli di apparire su di esso, pur mantenendo la Clickability del collegamento a stesso.