私は現在、アイソトープを使用してポートフォリオを整理しています。同位体アイテム内に要素を配置し、これらの要素の位置を固定にすると、画面上で固定されずに移動しないことがわかりました。代わりに、これらの要素は同位体アイテムの x および y 位置を初期画面位置として使用します。たとえば、要素を position:fixed および left:0; として配置するとします。上:0; この要素は画面の左上隅には表示されません。代わりに、同位体アイテムの左上隅に表示されます。
私が遭遇するもう 1 つの問題は、同位体アイテム内の要素の z-index が独立していないことです。要素の z-index が 100 で、すべての同位体アイテムの z-index が 10 の場合、他の同位体アイテムよりも大きな z-index を要素に与えた場合、「portfolio_display」はすべての同位体アイテムの背後に表示されます。 .
私が達成しようとしていることを説明するには：
同位体アイテムをクリックできるようにしたいのですが、アクティブ化すると、フルスクリーンのポートフォリオ表示が表示され、画面が占有されます。
lightbox 2 などのプラグインが機能することは知っています。しかし、私は自分のポートフォリオ表示にライトボックス 2 よりもはるかに豊富な機能を持たせたいと思っています。ケース スタディ、画像、ビデオをフル スクリーン モードで表示したいのですが、各画面は Web ページのような形式にすることができます。したがって、私の方法は、複数のフォーマットされた div をアイソトープ アイテムに配置し、(自分で作成した) javascript を使用してそれらの表示とスクロールを制御することです。この方法は、アイソトープをポートフォリオに統合し始めるまで機能します。
私は同位体がより大きな「ウェブページ」の中に小さな「ウェブページ」を作成したので、z-indexとそれ自身の内部の位置を指示していると思います。優れた機能を損なうことなく、同位体のサブ要素への口述を無効にできるかどうかを知りたい.
ありがとうございました。