Mettre des boutons et des liens sur les particules.js script (z-index)
je suis en train d'utiliser particules.js script, de sorte que les particules flottent sur toute la page (avec fond transparent). J'ai besoin de tirer des liens et des boutons au-dessus des particules, de sorte qu'ils seraient cliquable.
en ce qui concerne lien, est-ce que je peux placer un grand élément " C "au-dessus d'un grand élément" B "tout en ayant un petit élément" b "au-dessus du grand élément" C"?
ce que je pensais était que relatif signifie z-index par rapport à son parent alors que si je mettais tous les éléments à absolu, afficher le petit " b "sur le Grand" C " serait possible, mais ce n'est pas le cas. Quelqu'un peut-il expliquer cela pour moi?
<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>
2 réponses
ce que je suggère est, donner une valeur élevée z-index pour votre a(e.g. z-index:9999;) mais assurez-vous que les éléments parents de a n'ont pas de plus petites valeurs de l'indice z parce que l'indice z d'un élément sera limité par la valeur fixée par son parent.
alors pour votre question" est-ce que je peux placer un grand élément "C" au-dessus d'un grand élément "B" tout en ayant un petit élément "b" au-dessus du grand élément "C"?", la réponse est aucun parce que l'indice z de votre petit l'élément " b "serait limité par son parent, qui est le grand élément" B "et que le grand élément" B "est sous l'élément" C".
Voici un exemple de travail avec un .container affichage sous les particules tout en faisant fonctionner le lien. Ce qui importe, c'est que vous ayez ceci :
a{
position:relative;
z-index:9999;
}
Et assurez-vous que le parent (dans ce cas, le .container) doit avoir une valeur de l'indice z égale ou supérieure à 9999 (ou toute valeur supérieure à l'indice z du motif), autrement que limite l'indice z de a et s'il est inférieur à l'index z du modèle, les boutons ne seront pas cliquables.
si vous avez des boutons avec des fonds solides, je vous recommande de définir le style sur un pseudo-élément pour a avec un indice z plus bas pour permettre aux motifs d'apparaître dessus, tout en maintenant la cliquabilité du a lien lui-même.
La Position ne fait pas référence à l'index-z. Il se réfère à la position x,y sur l'écran. Lisez à propos de la propriété CSS position ici .
z-index est juste la position absolue sur l'axe Z. Par conséquent, un indice plus élevé se superpose à un indice plus bas.
La Position a néanmoins un effet sur l'axe z pour les divs en dehors de votre div, car des valeurs différentes impliquent des ordres de rendu différents. Vous pouvez voir cet effet si vous ouvrez les outils de développement chrome sur la page vous avez fourni et changez A de statique en relatif.
bien que A ait un indice de 37, Il sera au-dessus de B parce qu'il est rendu après A. Pour que z-index fonctionne de manière fiable, vous devez les empiler les uns dans les autres.
si vous ouvrez votre exemple de particule codepen et que vous ouvrez les outils de développement chrome, vous pouvez voir comment la boîte FPS se comporte bizarrement si vous cliquez sur les détails. C'est parce que c'est à l'extérieur de la particule.js div.
En résumé, si vous voulez voir ce qui se passe, utilisez quelque chose comme les outils de développement de chrome. Firefox, Opera et IE ont des outils similaires.
Voici un exemple de travail sur codepen. Ajoutez la classe à votre css et mettez le div sur la page:
.test {
index: 50;
top: 100px;
position: absolute;
}