aono1234
@aono1234

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ReactNativeでzIndexがうまくコントロールできない

解決したいこと

ReactNativeの学習の一環でソリティアのゲームを作っています。
トランプコンポーネントを作成し、それをスマホ上でPANで移動させることはできたのですが、なぜかドラッグした瞬間にz-index=50としているにもかかわらず、
選択中のカードが前面にきてくれません。

コードは該当の箇所となります。

動画

2024-11-0423.00.30-ezgif.com-video-to-gif-converter.gif
動画にようにハートの10を上下に移動した際,スペードの13(前要素)の前面には表示されていますが、
ハートの8(後要素)の後ろには隠れてしまいます。

理想はハートの10をアクティブにした際はすべての要素の最前面で表示させたいです。
ご存知の方がいれば、ご教授願います🙇‍♂️

0

1Answer

TrumpCardがそれぞれ親を個別にもっているからかもです。
重ね合わせコンテキストをご参照ください。

DOMツリーにおける要素の並び、positionの値、z-indexで重ね合わせコンテキストは制御されますが、z-indexはDOMツリーにおける兄弟要素について制御できます。

1Like

Comments

  1. @aono1234

    Questioner

    ありがとうございます。
    重ね合わせができなかった原因は、はとこ同士の要素zindexで重ね合わせようとしていたからでした。
    Viewのネストを無くしてカード同士を兄弟要素にしたらうまくできました。ありがとうございます。画面収録-2024-11-06-2.48.29.gif

Your answer might help someone💌