画像の背景をずらしたい zindex?

Question

画像と背景色の二つのブロックがあり、画像の右側まで背景色をずらしたいです。
zindexとpositionを使ってみたのですが、使い方がいまいち分かりません。
absoluteを指定して、positionでずらすのかもしれないですが、
abosoluteを指定すると、それより下の要素が上がってきてしまいます。
今は、reativeのみで使った状態です。

http://spiritualcompany.net/website/site1/index.html

簡易検索窓という画像の右側に背景グレイを重ねたいです。
そして、下のピンクのエリアは、そのままの位置に配置したいです。

基本的な質問ですみません。

<div class="second">
        <div class="second-back">
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col kensaku-img">
              <img src="image/kannikensaku.png" alt="簡易検索" class="d-block w-100 img-fluid">
            </div>
          </div>
        </div>
      </div><!--end of second-->

.second{
    position: relative;
}

.second-back{
    background-color: #dcdcdc;
    width: 300px;
    height: 500px;
    position: relative; top:150px; left:960px;
    z-index: -1;

}

.kensaku-img{
    margin-top: 75px;
    border-radius: 10%;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}

Bootstrapは、5．0.0betaです。
どうぞよろしくお願いいたします。

Answer 1

position: absolute; を使うと、その要素は浮いた状態になるので、後の要素が上がってきてしまいます。それを考慮して、marginで調整するという方法もありますが、ネガティブマージンを使って重ねるようにするとシンプルに実装できます。

.second-back {
    background-color: hsl(0deg 76% 77%);
    width: 300px;
    height: 500px;
    position: relative;
    top: 150px;
    left: 960px;
    z-index: 1;
    margin-bottom: -300px; /* これを調整して重ねる量を指定 */
}

Comments

[dobashi]

ありがとうございます。
ネガティブマージンを使うと重ねられるのですね。

ちなみに、このようにpxで指定すると、
モバイルのレスポンシブルにしたときにどっかに
いってしまうのですが、普通どうやって実装するのでしょうか？

[hatena19]

second-back を画面の右端に寄せたいということでしょうか。
それなら、margin-left: auto; を追加すればいいでしょう。

.second-back{
background-color: #dcdcdc;
width: 300px;
height: 500px;
position: relative;
top:150px;
margin-left: auto; /* 追加 */
z-index: -1;
margin-bottom: -300px;
}

[dobashi]

ありがとう御座います。それで右端まで移動させられるのですね。

お聞きしたいのはそれと、
margin-bottom: -300px;

のようにpxで指定していると、モバイル環境になり下の画像表示サイズが変わったとき重なり具合が変わるかなと思ったのですが。

%とか別のネガティブマージンの方法を取ればいいのでしょうか?

[hatena19]

設定によって対処法は変わってきますので、具体的なHTMLとCSSを提示して、どのようにうまくいかないのか、どのようにしたいのか、を提示して新規に質問したほうがいいでしょう。
場合によってはメディアクエリでPCとモバイルで設定を変更することになります。

[dobashi]

ありがとう御座います。
新規に質問します。

メディアクエリの方法があるのですね。
勉強になります。