画像の上にテキストを配置したいのですが

ビュー画面
添付のビュー画面の「Taiga Mclean」の文字を夕日の写真画面上に持っていきたいのですが上手くいきません。

実際のhaml,scssの記述については下記の通りです。

hamlについて
「.header-top__title」要素の中に
「image_tag 'sunset.jpeg」(画像)と
「%p Taiga Mclean」(文字)が並列で並んでいます。

(画像)を親要素、(文字)を子要素にしてposition指定するつもりでしたが、(文字)を(画像)にネストさせようと行をずらすとブラウザでエラーが起こりました。
なので仕方なく並列にしていますが、このままだとpositionが使えません。

SCSSについても実際は下記(一番下)のような記述が望ましいのですが・・

何か考えられる点がありましたらご教授願います。

haml
1%header.header-wrapper
2  .header-top
3    .header-top__header
4    .header-top__title
5      = image_tag 'sunset.jpeg', alt: '',  class: 'img-1'
6      %p Taiga Mclean
7    .header-top__menu
8      .header-top__profile
9        Profile
10      .header-top__discography
11        Discography
12      .header-top__live
13        Live
14      .header-top__message
15        Message

SCSS
1      .header-top__title{
2        background-color: yellowgreen;
3        height: 20vh;
4        width: 80vw;
5        // display: table-cell;
6        vertical-align: middle;
7        .img-1{
8          height: 20vh;
9          width: 80vw;
10          background-size: cover;
11        }
12
13        .header-top__title p{
14          color: blue;
15          text-indent: -59px;
16       }
17      }

SCSS
1＊望ましいSCSSのイメージ
2
3.header-top__title{
4        background-color: yellowgreen;
5        height: 20vh;
6        width: 80vw;
7        vertical-align: middle;
8        position: relative;　　　　　　  ←position使用
9         .img-1{
10           height: 20vh;
11           width: 80vw;
12           background-size: cover;
13         .header-top__title p{         ←.header-top__titleにネスト
14           position: absolute;      　 ←position使用
15           color: blue;
16         }
17       }
18}
19