position: relative;と position: absolute;がうまく設定できません

Question

実現したいこと

position: relative;と
position: absolute;で
トップ画像位置に表示崩れが起きないように
文字を配置したい

仕事に、恋愛に、美容に、<br>自分磨きに余念がないそこのあなた、
お金のこともこの機会に見直してみませんか？
↑これをトップ画像（スライダーの上）に配置したいです

前提

現在指定しているposition: absolute;の位置では
画面を伸ばした時に思う位置に固定されません

該当のソースコード

困っているコード
https://jsfiddle.net/2wzLy30f/

サンプルコード
https://jsfiddle.net/2wzLy30f/1/

試したこと

<div class="swiper"> <div class="swiper-wrapper"> の位置にposition: relative;をしましたが 下のクラスに引っ張られているのかうまいく行きません。

基礎的なことで恐縮ですが
ご回答していただけますと助かります。
ご協力よろしくお願いいたします！

Answer 1

どのような表示にしたいのか今ひとつわからないのですが、position: relative;にした要素を基準にしてposition: absolute;で配置をしたいのであれば、親子関係が必要です。
<div class="swiper">と.text-bは兄弟関係ですので、そのあたりを考慮されてはいかがですか？

Comments

[chogemi]

わかりずらいなか助言ありがとうございます。
なるほど。親子関係ですね！すぐ下に要素配置されてればいいと勘違いしていました。
ありがとうございました。

[Lhankor_Mhy]

お役に立てたようで何よりです。