【CSS】webサイトの背景と画像の間に台形の図形を入れたい

Question

実現したいこと

webサイトの背景と画像の間に台形の形の図形を入れたい
（CSSで背景の上に台形を作成して、更にその上に画像を置きたい）

前提

・webサイトのメインビジュアルの背景は一色
・その背景に１つ大きな台形の図形を入れたい。（横幅700px程度、縦はMVの高さ100%に）
・上記でできたものの上にMVなので人物の写真を設置したい

上：人物の写真（mv.png）
真ん中：台形
下：背景色
上記の三重構造にしたいが、台形が一番上に表示されてしまう。

現状↓
上：台形
真ん中：人物の写真（mv.png）
下：背景色

台形が人物の写真（mv.png）より前に表示されてしまう

該当のソースコード

    <section id="mv">
      <div class="mv">
          <img src="img/mv.png" width="" alt="" />
        </div>
      </div>
    </section>

#mv {
  max-width: 100%;
  height: 500px;
  background: #87e5fc;
  position: relative;
}
#mv::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 100%;
  border-top: 500px solid #bdf1fe;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  box-sizing: border-box;
  left: 100;
}
#mv .mv {
  z-index: 100;
}

    <section id="mv">
      <div class="mv">
          <img src="img/mv.png" width="400px" alt="" />
        </div>
        <div class="trapezoid">
        </div>
      </div>
    </section>

#mv {
  max-width: 100%;
  height: 500px;
  background: #87e5fc;
  position: relative;
}
#mv .mv {
  z-index: 100;
}
#mv .trapezoid {
  position: absolute;
  width: 700px;
  height: 100%;
  border-top: 500px solid #bdf1fe;
  border-left: 100px solid transparent; 
  border-right: 100px solid transparent; 
  box-sizing: border-box;
  top: 0;
  left: 30px;
  z-index: 5;
}

試したこと

html1では疑似要素を使用したが、うまくいかなかったので、
原因は写真（.mv）が疑似要素を入れている#mvに囲まれているからだと推測し、
html2では別の台形用divを作成した。
z-indexを入れてみましたがうまく出来ませんでした。

お分かりになる方がいましたらよろしくお願いいたします。

Answer 1

要素にpositionを設定していないと、z-indexは効きません。(下記リンク参照)

【CSS】z-indexの基本と使い方｜効かない時の原因はコレ | JAJAAAN

下記のように、なんらかのposition設計を追加すれば効くようになります。

#mv .mv {
  position: relative;
  z-index: 100;
}

Comments

[mimicon]

ありがとうございます。
html2、css2の方の.mvにposition: relative;を足したところ再現できました。