異なる親要素を持つ要素の重なりの指定方法が知りたい

実現したいこと

【slick sliderを使用したスライダー画像の重なり順の指定について】

画像A、画像Bを重ねて1つのスライダーアイテムを構成するとき、画像A、画像Ｂの間にスライドしない要素を挟み込みたいです。

このような場合、HTMLをどのように構成すべきでしょうか。

前提

• jQueryのSlick Slider使用
• wordpress使用

該当のソースコード

当然ですが、親要素が違う＆slick sliderの仕様により、mv-sliderからmv-slider__itemの間に複数のpotision:relativeが指定された要素が挟み込まれてしまいます。
そのため、斜め線の下に画像A,Bが配置されてしまいます。

//mvにposition:relative; <section class="mv"> <div class="mv-slider"> <div classs="mv-slider__item"> //画像A <img class="mv-slider__item--main" src="img/slider-img01.png"> 　　　　//画像B <img class="mv-slider__item--sub" src="img/slider-img01-sub.png"> </div> </div> //[スライドしない要素]セクション感を仕切る斜め線 <div class="skew-line"></div> </section> <style> .mv { position: relative; z-index: 0; } .skew-line { position: absolute; content: ''; width: 100%; height: 80px; left: 0; bottom: -80px; background-image: linear-gradient( 90deg, #8AD2F9 0%, #1994D8 100%); transform: skewY(-3.7deg); transform-origin: bottom left; z-index: 30; } .mv-slider { position: relative; z-index: 10; } .mv-slider__item--main { position: relative; } .mv-slider__item--slider { position: absolute; width: 46%; top: 70%; left: 52%; z-index: 40; } </style>

試したこと

• 画像Aと画像Bをそれぞれ別のスライダーにして、スライダーに重ねる

　→slick sliderで補完される要素への高さ指定がうまくいきませんでした。

イメージ画像

イメージ説明