画像を一番下に設置したいのですが、position:absoluteで上手くいきません

白熊のした部分の平行線を、レスポンシブで縮めたり伸ばしたりしても、濃い水色部分の平行線と常にくっついてる状態にしたいのですがうまくいきません。
position:absolute;でbottom:-13px;にしてあげると上手く行くかと思いましたが、
これをするとテキストが左に来てしまったり、熊がセクションの上の壁を突き抜けてしまいます。

熊と同じ高さにして、レスポンシブで縮めると、テキストが熊の上に来るようにしたいと思っています。
でもまず、熊のポジションをうまく移動させたいのですが、上記のような状態です。
お手数ですがよろしくお願いします。

追記画像

<section class="profile-mv">
  <div class="profile-mv-wrap">
    <div class="profile-mv-wrap-left">
      <img src="//img/kuma.png">
    </div>
    <div class="profile-mv-wrap-right">
      <h1>ああああ<br>ああああああああ</h1>
    </div>
  </div>
</section>

.profile-mv {
  height: auto;
  background-color: skyblue;
  padding-top: 30px;
}

.profile-mv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.profile-mv-wrap-left img {
  position: absolute;
  bottom: -20px;
}

.profile-mv-wrap-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.profile-mv-wrap-right h1 {
  font-size: 56px;
  font-weight: bold;
  text-align: center;
  color: white;
}

行動規範の内容に同意します

回答1件

ベストアンサー

position:absolute;を設定した要素は浮いた状態になるので、他の要素が裏に回り込みます。

position:absolute; はやめて、flex でレイアウトを決めるとうまくいきます。

css
1.profile-mv {
2  height: auto;
3  background-color: skyblue;
4  padding-top: 30px;
5}
6
7.profile-mv-wrap {
8  max-width: 1080px;
9  margin: 0 auto;
10  display: flex;  
11}
12
13/* 下記追加 */
14.profile-mv-wrap-left {
15  display: flex;
16  align-items: flex-end; /* 下揃え */
17}
18
19.profile-mv-wrap-right {
20  display: flex;
21  align-items: center;
22}
23
24.profile-mv-wrap-right h1 {
25  font-size: 56px;
26  font-weight: bold;
27  text-align: center;
28  color: white;
29}

投稿2021/01/05 13:14

hatena19

総合スコア34075

takawork

2021/01/05 14:19

回答ありがとうございます。align-items: flex-end;を追加した場合の画像を追加しました。理想としては、2枚目の画像のように、手の部分が次のセクションに重なってるようにしたいのですが、 align-items: flex-end;だと手の先っちょに合わせて、画像が下にくっつくので上手く行ってないっぽいです。。。

takawork

2021/01/05 14:24

align-items: flex-end;で一旦下に固定して、そこからbottom:-13px;とかで下げればいいかなと思いましたが、bottomはやっぱり効きませんでした。