html - 背景を通して表示される非表示のフッターを修正

Question

これは私の最初の投稿です。

現在取り組んでいるウェブサイトに小さな問題があります。(css) パララックス ヘッダーを使用しているので、「特別な」フッターも必要でした。

アイデアは、それを下部に固定し、ボディが最初にフッター下部を表示するようにすることでした. 問題は、私の Web サイトが複数のセグメントで構成されていて、それらの間にフッターが表示されていることです。

このようなセグメント間に背景を作成して、これを修正しようとしました

.background { 
 color: #f1f1f1; 
 width: 100%; 
 height: 90%; 
 z-index: -2;
}

私のフッターはこのように見えます

.footer {
    padding: 40px 0;
    text-align: center;
    text-decoration: none;
    background: black;
    color: #white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

しかし、どちらz-indexを試しても、フッターは完全に背景にあるか、すべての前にあります。

他に何を試すことができるか本当にわかりません。

これが私の（短い）HTML本文です（その前にヘッダーとナビゲーションバーしかありません）：

<div class="main">
    <div class="row">
        <div class="leftcolumn">

            <div class="card">
                <h1><?php echo $welcome1;?></h1>
                <h5><?php echo $post;?></h5>
                <p><?php echo $welcome2;?></p>
            </div>

            <div class="card">
                <h2>Hiragana</h2>
                <h5><?php echo $post;?></h5>
                <img src="..//nihongo/pics/hiragana.png" width="650px" height="400px">
                <p><?php echo $hira;?></p>
            </div>

            <div class="card">
                <h2>Katakana</h2>
                <h5><?php echo $post;?></h5>
                <img src="..//nihongo/pics/katakana.png" width="650px" height="400px">
                <p><?php echo $kata;?></p>
            </div>
        </div>

        <div class="rightcolumn">

            <?php include '../nihongo/php/language.php'; ?>

            <div class="card">
                <h2><?php echo $me1;?></h2>
                <img src="../nihongo/pics/me.png" width="240px" height="322px" style="border: 1px solid black;border-radius:10px;">
                <p><?php echo $me2;?></p>
            </div>

            <div class="card">
                <h3><?php echo $use;?></h3>
                <div class="fakeimg"><p>Hiragana</p></div><br/>
                <div class="fakeimg"><p>Katakana</p></div><br/>
                <div class="fakeimg"><p>Kanji</p></div><br/>
            </div>

            <?php include '../nihongo/php/follow.php';?>

        </div>
    </div>
  </div>

    <?php include '../nihongo/php/footer.php';?>

</body>

この Web サイトを複数の言語で実行しているため、これらすべての PHP 変数を使用しています。

これが私の「修正」なしの問題のスクリーンショットです。

必要に応じて、私のコードをさらに提供できます。見たいものを教えてください (今は、この記事をあまり長くしたくありません)。