文字の上に画像を配置する方法に関しての質問

Question

文字の上に画像を乗せたいのですが、調べても出てきません。
画像の上ではなく、文字の上に画像です。

文字のサイズを縦500px横500pxとして、その上に画像サイズを縦50px横50pxを乗せたいです。
cssにて、ポジションやz-indexなど設定しましたが、文字の上に画像が出てくることはありません。

そもそも出来ない事なのでしょうか？
コードを書き足させて頂きました。

  <header>
<div id="top_img">
<div class="text">
  <p>安心・安全<br>足場の事なら</p>
</div>
<div class="icon">
  <img src="imags/k0898_3.png" alt="">
</div>
</div>
</div>
  </header>

  #top_img {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;

      .text {
        p {
          background-image: url("./imags/IMG_1211.jpeg");
          background-size: cover;
          background-repeat: no-repeat;
          width: 100vw;
          height: 100vh;
          background-attachment: fixed;
          background-position: 50% 50%; // animation: animationZoom 5s ease-in-out forwards;
          color: #fff;
          font-size: 4rem;
          padding-top: 50px;
          animation: sample2Anime 4s linear infinite alternate;
          text-align: center;
          z-index: -100;
        }
      }

      .icon {
        img {
          background-color: red;
          position: absolute;
          z-index: 100;
          width: 200px;
          height: 300px;
        }
      }
    }

Comments

[Lhankor_Mhy]

できると思います。

コードをご提示ください。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[yambejp]

文字の上に画像をのせたら文字が見えないと思いますが？

[Lhankor_Mhy]

文字の上に乗せたい画像というのは、k0898_3.png でいいのですよね？
縦50px横50pxというCSSになっていませんが、それは気にしなくていいですか？

[Lhankor_Mhy]

時間がなかったので、↑の前提で回答しました。

Answer 1

文字の上に乗せたい画像が、k0898_3.png のことだという前提で回答します。

絶対配置は、通常フローから外れて、そこに何も存在しないかのように後続の要素が配置されます。
ですので、先に登場する要素に重ねるにはいろいろ工夫が必要です。

手っ取り早い解決方法は、順番を入れ替えてしまうことです。

  <header>
<div id="top_img">
<div class="icon">
  <img src="http://placehold.jp/150x150.png?text=imags/k0898_3.png" alt="">
</div>
<div class="text">
  <p>安心・安全<br>足場の事なら</p>
</div>

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