web-dev-qa-db-ja.com

particles.jsスクリプト（Z-index）にボタンとリンクを配置する

particles.js スクリプトを使用しようとしているので、パーティクルはページ全体に浮かんでいます（背景は透明です）。パーティクルの上にあるリンクとボタンのいくつかを引っ張って、クリックできるようにする必要があります。

link に関して、大きな「C」要素の上に小さな「b」要素を置きながら、大きな「B」要素の上に大きな「C」要素を置くことはできますか？

私が考えていたのは、relativeは親に対するz-indexを意味し、すべての要素をabsoluteに設定すると、大きな「C」の上に小さな「b」を表示することは可能ですが、そうではありません。誰かが私のためにそれを説明できますか？

<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>
csshtmlz-index
16
Marek

私が提案するのは、aに高い値のz-indexを指定することです（例：z-index:9999;）ただし、要素のz-indexはその親によって設定された値によって制限されるため、aの親要素のz-index値が小さくならないようにしてください。

だからあなたの質問「私は大きな「C」要素の上に小さな「b」要素を持ちながら大きな「B」要素の上に大きな「C」要素を置くことができますか？ "、答えはnoです。これは、小さな" b "要素のz-indexが、その親によって制限されるためです。大きな「B」要素とその大きな「B」要素は「C」要素の下にあります。

これが実用的なサンプルです.containerリンクを機能させながら、パーティクルの下に表示します。重要なのはあなたがこれを持っているべきであるということです：

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

そして、親（この場合は.container）は9999以上のz-index値（またはパターンのz-indexより大きい値）を持っている必要があります。そうでない場合、aのz-indexが制限され、パターンのz-indexよりも小さい場合はボタンはクリックできません。

背景が無地のボタンがある場合は、aリンク自体のクリック可能性を維持しながら、パターンが表示されるように、z-indexが低いaの疑似要素にスタイルを設定することをお勧めします。

11
Billy

位置はz-indexを参照しません。画面上のx、y位置を指します。 css positionプロパティについて読む ここ 。

z-indexは、z軸上の絶対位置です。したがって、高いインデックスは低いインデックスよりもスタックします。

それでも、値が異なるとレンダリング順序が異なるため、位置はdivの外側のdivのz軸に影響します。指定したページでchrome開発者ツールを開き、Aを静的から相対に変更すると、この効果を確認できます。

Aのインデックスは37ですが、Aの後にレンダリングされるため、Bより上になります。z-indexが信頼できるように機能するには、それらを互いにスタックする必要があります。

Codepenパーティクルの例を開き、chrome開発者ツールを開くと、詳細をクリックするとFPSボックスがどのように奇妙に動作するかを確認できます。これは、particle.jsdivの外部にあるためです。

要約すると、何が起こっているのかを知りたい場合は、Chromeの開発ツールのようなものを使用してください。 Firefox、OperaとIEには同様のツールがあります。

codepen の実例を次に示します。クラスをcssに追加し、ページにdivを配置します。

.test { 
  index: 50;
  top: 100px;
  position: absolute;
}
2
Johannes Maria Frank