css position: relative absoluteについて

Question

お世話になっております。

cssのposition: relative absoluteについて
質問です。

イメージの図のようなデザインにする場合
position: relative absoluteを使い
要素を重ねる実装方法があると思いますが、
画面幅が変化すると当然にデザインが崩れると思います。

画面幅の変化に対応できる実装方法をご教示ください

.top-page-wrapper{
    background: url("./img/カフェ風景画像.png") no-repeat center center / cover;
    z-index: -11;
}
.top-page-wrapper-inner{
    max-width: 940px;
    margin: 0 auto;
    width: 100%; 
    padding-top: 135px;
    padding-bottom: 131px; 
  

}
.top-page-logo-wrap{
    width:468px;
    height: 455px;
    max-width: 100%;
    margin: 0 auto;
    padding: 131px 0 135px 0;
    border-radius: 50%;
    background-color: #fff;
    border: solid 20px #42210B;
    position: relative;
    z-index: 2;
   
}
.top-page-logo-wrap img{
    width: 291px;
    height: 240px;
    margin: 0 auto;
    position: absolute;
    top: 56px;
    left: 16%;
    z-index: 1;
    /* border-radius: 50%; */
}
.Shadow{
    height: 94px;
    width: 468px;
    position: absolute;
    top: 590px;
    left: 383px;
    background-color: #42210B;
    z-index: 0;
    border-radius: 60%;
}

 <div class="top-page-wrapper">
             <div class="top-page-wrapper-inner">
                 <div class="top-page-logo-wrap">
                     <div class="top-page-log">
                            <img src="./img/ノマド家ロゴ.png" alt="">
                     </div>
                 </div>
                 <div class="Shadow"></div>
            </div>
             <div class="Nomod-Declaration">
                 <div class="Nomod-Declaration-inner">
                    <p class="fs-L">Cafe of the nomad, by the nomad, for the nomad.<br>
                           ノマドの、ノマドによる、ノマドのためのカフェ。
                    </p>
                </div>   
            </div>
         </div>

Comments

[m.ts10806]

ご自身が試したコードをご提示ください。

[gomakasu423]

html css を追記いたし。

[yasutomi]

私は回答しませんが3点だけツッコミます。
・z-index: -11 や z-index: 0 ではなく整数値が望ましい
・border-radius: 60% は 50% で良い
・left: 16% と left: 383px は相対値と絶対値

[m.ts10806]

yasutomiさん
0も-3も整数のような。正数の間違いですかね？

[yoshinavi]

今の提示画像ではどのようにしたいのかが不明です。
もう少し、どの要素をどこにどのように配置や表示させたいのかを追記してください。
※例えば横幅○○pxの時と××pxの時のキャプチャ等

[gomakasu423]

コメントいただきありがとうございます。
＞もう少し、どの要素をどこにどのように配置や表示させたいのかを追記してください。
⇒既存のキャプチャでいうと白い部分茶色の塗部分の位置関係を常に一定にしたい。

【イメージの概要】
丸い球体に影を付けたようなデザインをイメージしてます。

球体部分をtop-page-logo-wrapで縁をとって丸い円を描き
円の中に画像をはめ込むように記述してます。

影の部分はShadowという空のdivを作りborder-radius: 60%を指定して
楕円形を描きました。

【問題点】
Shadowをposition:absolutでleftを絶対値で指定しているので画面幅が変化すれば
親要素に対してずれていくのは当然の結果だというのは理解できます。

影を丸い球体に対して常に同じ位置にしたいので
Shadowをtop-page-logo-wrapの直下(子)に配置すると
球体と影の位置関係の問題は解消されるが、スタック文脈の問題(ｚ-indexが効かない)が発生し
影が前面に表示されてしまう。

何かいい方法があればご教示くださいませ。
以上よろしくお願いいたします。

Answer 1

【問題点】

Shadowをposition:absolutでleftを絶対値で指定しているので画面幅が変化すれば
親要素に対してずれていくのは当然の結果だというのは理解できます。

理解が少し不足しているように思います。
「.top-page-logo-wrap」も「.Shadow」も、基準が同じ親であれば、親の変化に合わせて同じように変化します。

今回は親がそれぞれ違うので、当然「ズレ」が生じます。基準を同じ親にする必要があります。

以下を追加してみてください。

.top-page-wrapper-inner {
  position: relative;  /* ← 追加 */
}

※「.top-page-wrapper-inner」の幅より、画面幅が小さくなると、上記だけではズレます。

Comments

[gomakasu423]

コメントいただきましてありがとうございます。

親要素を共通にすることで1つの問題は解消できるということは理解できました。
ありがとうございます。

しかしながら、Z-indexについては、こちらでは解消ができませんでした、
つまり、下記を追記いたしましても
(.top-page-wrapper-inner { position: relative; /* ← 追加 */})
結果として、球体と影の位置関係の問題は解消されるが、スタック文脈の問題(ｚ-indexが効かない)が発生し
影が前面に表示されてしまう。(前回コメント)

そうすると、スタック文脈、親要素を共通する、2点の観点で
HTMLを書き直す必要があるという結論に至りました。

以上、よろしくお願いいたします。

[yoshinavi]

＞球体と影の位置関係の問題は解消されるが、スタック文脈の問題(ｚ-indexが効かない)が発生し影が前面に表示されてしまう。

→　提示のコードでは「.Shadow」は、「.top-page-logo-wrap」より、背面に表示されています。
提示の画像でもそう見えます。
実際のコードでは違うのでしょうか？