ヘッダーと本文が積み木状態にならない問題

Question

前提・実現したいこと

個人アプリ開発中です
トップページのヘッダーが積み木関係にならず画像が上手く表示させることができません。

本文のHTML

<%= render "shared/header" %>

  <%# トップ画像 %>
<div class="contents"> 
  <div class='first-page'>
    <img class="top-page-photo" src="/assets/top-page2.jpg">
    
    <%# コンセプトテキスト %>
    <div class="top-concept">
      <h3 class="consept-text">
        テキストが入ります。テキストが入りますテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
      </h3>
      <h4 class="second-consept-text">
        テキストが入ります。テキストが入りますテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
      </h3>
    </div>
  </div>
</div>

本文のCSSです
.contents{
  width: 100vw;
  display: flex;
  background-color: violet;
}

.top-page-photo{
  width: 100%;
  height: 100%;
  object-fit: cover; /*画像の縦横比を整える */
  opacity: 0.2;
}

contensがヘッダーの領域まで表示されている為写真が透けてしまっています

この問題を解決したいです
皆様のお力をお貸しください…！よろしくお願いいたします

##追加
皆様ご指示ありがとうございます。

<%#_header.html.erbのHTML%>


<header>
  <div class='top-page-header'>
    <%#ロゴの情報が入る%>
      <div class='photoroke-icon'>
        <a href="/">
          <img class='photoroke-icon-photo'src="/assets/Photoroke_logo.png">
        </a>
      </div>

    <%#ページの名前が入る%>
      <h2 class='top-page-name'>
        ここに各ページの名前が入ります
      </h2>

    <%#ハンバーガーアイコンが入る%>
      <p class='hamburger'>tekisuto</p>
  </div>
</header>

<%#_header.css%>

*{
  margin: 0px; 
}

.top-page-header {
  width: 100vw;
  height: 15vh;
  display: flex;
  background-color:#DDDDDD;
  justify-content: space-around;
  align-items: center;
  position: fixed;
}

.photoroke-icon{
  height: 90%;
  margin-top: 10px;
}

.photoroke-icon-photo{
  height: 100%;
}

.top-page-name{
  background-color: cornflowerblue;
  height: 50%;
  font-size: 3vh;
}

.hamburger{
  background-color: darkgreen;
  width: 100px;
  height: 50px;
}

#解決方法
Lhankor_Mhy 様よりアドバイスいただきまして解決することができました
何をしたかと言いますと、ヘッダーの大きな枠であるtop-page-headerを
本文の大きな枠であるcontentsの並び順を、z-indexで指定してあげたら良いということでした
######IllustratorやPhotoshopを触ったことがあるかただったらレイヤーの重なり順みたいな感覚のものです
僕がしたい事としては、top-page-headerがcontentsより上に来てくれればcontentsの画像がヘッダーにかかることがないわけです。
なのでtop-page-headerにz-index1を記述しました。

Comments

[m.ts10806]

Ruby on Rails前提でしたらタグがないとアドバイスは得られないかと思います。
HTML,CSSだけならHTMLもブラウザに表示されたコードをご提示ください。

[Lhankor_Mhy]

ヘッダー部分のHTMLとCSSをご提示ください。

Answer 1

こんにちは。

これは、重ね合わせコンテキスト（スタッキングコンテキスト）の影響です。

本来であれば、その画像は position:fixed であるヘッダの下に潜るはずです。
しかし、opacity を設定するとスタッキングコンテキストを生成するので、画像もヘッダと同じく「高さのある」状態になります。
そして、双方とも z-index:auto ですので、同じ「高さ」となり、DOMの出現順で画像の方が上に来るのです。

---

解決方法ですが、z-index を適切に設定しましょう。
下記の参考ページが、かなりわかりやすいです。

---

参考：
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

Comments

[EleAco]

解決することができました！
解決した方法に関しては本文にて記述させていただきます！
大変助かりました新しく知識を増やすことができましたありがとうざいます

[Lhankor_Mhy]

追記拝読。
正しいご理解だと思います。
ご解決されて何よりでした。