JSXにおけるz-indexの適用について

Question

以下のようなコードを用いてある画像を最前面にしようとしているのですが、うまくいきません。どのようにすればよろしいでしょうか。
よろしくお願いいたします。

 const styles = (position_number) => ({
        arrowbounce: {
            opacity: `${position_number ? 1: 0}`,
            bottom: 0,
            right: 0,
            position: "fixed",
            zindex: 100000000,
        },
    });

Answer 1

あとは、出力中にブラウザの開発ツールなどでちゃんとz-indexが設定されるかもご確認ください。設定されているにもかかわらず前面に出てこない場合は、
その親要素がそもそも背面に位置している場合もあります。

Answer 2

z-indexのようなハイフンが入るプロパティは、JSXで操作する際にはzIndexのようにキャメルケースに書き換える必要があります。