HTML CSS 文字が見えない

下記のhtmlとcssにて、文字がみえません。
footerの範囲を変更すれば文字は見えます。
なぜ、見えなくなるのか理由がわかりません。
基礎的なことで大変申し訳ないのですが、ご教示の方よろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<html>
4    {{-- style --}}
5    <link href="{{ asset('css/site.css') }}" rel="stylesheet">
6
7    <body>
8
9        {{-- header start --}}
10        <header>
11            <div class="l-header">
12                <div class="c-siteLog">
13                    ここの文字が消されます。
14                    ここの文字が消されます。
15                    ここの文字が消されます。
16                </div>
17            </div>
18        </header>
19        {{-- header end --}}
20
21        {{-- footer start --}}
22        <footer>
23            <div class="l-footer">
24            </div>
25        </footer>
26        {{-- footer end --}}
27
28    </body>
29</html>
30

下記のcssだと文字が消えてしまいます。
footerが上書きしているのでしょうか？ただ、/* mozi */.c-siteLogを一番下に持っていっても文字が見えません。

css
1/* CSSカスタムプロパティ */
2:root {
3    --base-color: aquamarine;
4}
5
6/* header */
7.l-header {
8    position: absolute;
9    left: 0px;
10    top: 0px;
11    right: 0px;
12    height: 60px;
13    background-color: var(--base-color);
14}
15
16/* mozi */
17.c-siteLog {
18    position: absolute;
19    left: 0px;
20    color: black;
21}
22
23/* footer */
24.l-footer {
25    position: absolute;
26    /* height: 110px; */
27    top: 0px;
28    left: 0px;
29    right: 0px;
30    bottom: 0px;
31    background-color: var(--base-color);
32}