position:absoluteで上にしたい要素がposition: relative;の上に表示されない

Question

前提・実現したいこと

fvの上に、.main-wrapper（テキスト）を載せたいのですが、表示されません。
原因と対処法を知りたいです。

ご教授よろしくお願いいたします。

該当のソースコード

 <section id="fv">
   <div class="main-wrapper">
    <p class="en-title"></p>
    <p class="ja-title"></p>
   </div>


  </section>

該当のソースコード

#fv {
  position: relative;
  background-image: url(../img/[e-mail]);
  background-position: center;
  background-size: cover;
  height: 100vh;
  /*height:100vw;*/
  min-height: 550px;
  /*忘れ*/
  z-index: 0;
}
#fv .main-wrapper {
  position: absolute;
  color: #FFFFFF;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  font-weight: bold;
  display: block;
  /*忘れ*/
  /*忘れ*/
  /*z-index: 1;*/
  z-index: 9;
}
#fv .en-title {
  font-size: 7rem;
}
#fv .ja-title {
  font-size: 4rem;
}

試したこと

①一旦#fv画像を消してみる（下にあるかどうか確認するため）
→視覚的に文字は見えなかったが（背景色と同化しているため）、ディベロッパーツールなどで.main-wrapperが存在していることは確認済です。

②z-indexで要素の重なりを指定
→同じ指定しているとz-indexがきかないことがよくあるとのことだが、z-indexもpositionもきちんと親子要素に指定していると認識しています。

③参考記事を探す
https://www.netimpact.co.jp/diary/22704/
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html
https://saruwakakun.com/html-css/basic/z-index
https://teratail.com/questions/293337

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

Comments

[int32_t]

掲載してあるコードだと、.main-wrapper の中には何もテキストがないし背景も透明なので何も表示されないのは当然に思えます。

[mitrasi]

全くその通りでした????
完全に重なりとかCSSのミスだと思い込んでおり、こんなことにも気づけずお恥ずかしいです。
テキスト追加したら普通に解決しました。ありがとうございます。

Answer 1

回答　CSSのbackground-imageで画像が読み込めているか確認してみてください。

localで試してみましたが、初めは画面が真っ白でした。背景画像が無いというオチでした。
文字が白なんで、画像が表示されないと白背景に白文字で何もないように見えます。
url(../img/[e-mail])この画像は表示されておりますでしょうか？

追記　ｐタグの中身を追加した状態で試しております。
コンテンツを曝さないようにｐタグを空にしたのだと捉えましたが、
実際に空ということは無いですよね？

Comments

[mitrasi]

申し訳ありません????
本気で<p>タグの中身入れ忘れていただけで、テキストを追加すると普通に現れました。
ご回答ありがとうございます！

[退会済みユーザー]

いえいえｗ
すごく慎重な人かと思ったらかなりのうっかりさんでほっこりしましたｗ
がんばってくださいっ

[mitrasi]

こんなアホみたいな質問したのに寛容すぎます。。
ありがとうございます！がんばります！！