position: absoluteで指定した値を基準にほかの要素の配置を変更することはできますか？

前提

画像の上に文字を配置したいのですが、ブラウザサイズを縮小した際に要素が重なってしまいます。
画面を縮小した際にもh１とpが重ならないようにしたいです。

実現したいこと

画像にposition: relativeを付与し、h1要素、p要素それぞれにposition: absoluteを付与しているたこのようになっていると思うのですが、この場合h1を基準にpにposition: absoluteを付与することはできるのでしょうか？

該当のソースコード

【html】
            <div class="design">

                <picture>
                    <img src="/images/hoge.jpg" width="2000" height="400" alt="" >
                </picture>
                
                <h1 class="design__en">大要素</h1>
                <p class="c-mv-design__ja">小要素</p>
            </div>
【sass】
.design{
    position: relative;
    & img{
        width: 100%;
        position: relative;
    }
    &__en{
        position: absolute;
        top: 37%;
        left: 25%;
        font-family: "Noto Sans CJK JP";
        font-weight: bold;
        font-size: 80px;
        letter-spacing: 0.05em;
        line-height: 44px;
        color: #fff;
    }
    &__ja{
        position: absolute;
        top: 60%;
        left: 25%;
        font-family: "Yu Gothic";
        font-weight: bold;
        font-size: 35px;
        letter-spacing: 0.05em;
        line-height: 30px;
        color: #fff;
    }
}

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

回答1件

ベストアンサー

position: absoluteの基準は祖先要素にしかできませんので、兄弟要素であるh1を基準とすることはできません。
現状の方法でいくなら、h１とpを囲むブロック要素を追加して、それをposition: absoluteで位置決めするということになりますね。

html
1<div class="design">
2  <picture>
3    <img src="/images/hoge.jpg" width="2000" height="400" alt="">
4  </picture>
5  <div class="design_title">
6    <h1 class="design_title_en">大要素</h1>
7    <p class="design_title_ja">小要素</p>
8  </div>
9</div>

SCSS
1.design {
2  position: relative;
3  & img {
4    width: 100%;
5    position: relative;
6  }
7  &_title {
8    position: absolute;
9    top: 37%;
10    left: 25%;
11    &_en {
12      font-family: "Noto Sans CJK JP";
13      font-weight: bold;
14      font-size: 80px;
15      letter-spacing: 0.05em;
16      color: #fff;
17      margin: 0;
18    }
19    &_ja {
20      font-family: "Yu Gothic";
21      font-weight: bold;
22      font-size: 35px;
23      letter-spacing: 0.05em;
24      color: #fff;
25      margin: 0;
26    }
27  }
28}

ちみなに line-heightをfont-sizeより小さくするのはお勧めしません。折り返したとき重なってしまいますので。おそらくh1とpの間隔を狭めたいと思ったのだと思いますが、marginで調整する方がいいと思います。h1とpはデフォルトでmarginを持ってますので、それを上書きするといいでしょう。

蛇足かもしれませんが、
背景画像の上にテキストを載せたいのなら、背景画像は、css background-image で設定して、テキストはflexで位置決めするのが自然だと思いますし、レスポンシブ対応なども楽になると思いますよ。

html
1<div class="design">
2  <h1 class="design__en">大要素</h1>
3  <p class="design__ja">小要素</p>
4</div>

scss
1.design {
2  position: relative;
3  height: 400px;
4  background: url(/images/hoge.jpg) center/cover;
5  display: flex;
6  flex-direction: column;
7  justify-content: center;
8  padding-left: 25%;
9  & > * {
10    font-weight: bold;
11    letter-spacing: 0.05em;
12    color: #fff;
13    margin: 0;
14  }
15  &__en {
16    font-family: "Noto Sans CJK JP";
17    font-size: 80px;
18  }
19  &__ja {
20    font-family: "Yu Gothic";
21    font-size: 35px;
22  }
23}