z-indexがうまく動きません。

Question

右側の茶色いボックスを猫の画像の上に表示したいと思って、z-indexを入れてみたのですが作動しませんでした。
下記を参考にしてます。
https://jajaaan.co.jp/web-production/frontend/z-index/
position: absolute;を使うと、右の箇条書きの要素が猫の上に表示されてしまいます。
これはどのようにしたら解決出来ますでしょうか？よろしくお願いします。

<div class="company-info-box-right-excerpt-cover">
        <div class="company-info-box-right-excerpt">
          <p>
            <?php the_excerpt(); ?>
          </p>
        </div>
        <div class="company-info-box-right-excerpt-signboard-cat">
          <img src="<?php echo get_template_directory_uri(); ?>//img/signboard-cat.png">
        </div>
      </div>

.company-info-box-right-excerpt-cover {
  position: relative;
}
.company-info-box-right-excerpt {
  height: auto;
  max-width: 512px;
  border-radius: 12px;
  background-color: #f8f8f8;
  padding: 10px;
  margin-left: 30px;
  border: 6px solid brown;
  filter: drop-shadow(0 0 10px white);
  p {
    margin-bottom: 0 !important;
    font-weight: bold;
  }
}
.company-info-box-right-excerpt-cover {
  position: relative;
  p {
    position: relative;
    z-index: 2;
  }
}
.company-info-box-right-excerpt-signboard-cat {
  img{
    filter: drop-shadow(0 0 10px white);
    width: 200px;
    position: relative;
    top: -50px;
    left: 150px;
    z-index: 1;
  }
}

Answer 1

猫が持ってる棒が、カンバン(「千代田区。」で始まる囲み)の後ろに隠れてほしい、ということかな?

もし、そうなら、.company-info-box-right-excerptにposition: relative;とz-index: 2;を付ければ良いと思います。

Comments

[takawork]

意図を汲み取って頂きありがとうございます。無事に表示できました。

Answer 2

z-indexは兄弟要素でのコントロールに使います。
下記のようにすれば猫の持っている棒が茶色枠のボードの後ろに回ります。

.company-info-box-right-excerpt-cover {
    position: relative;
    z-index: 2
}

Comments

[takawork]

回答ありがとうございます。かなり参考になりました。