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

Question

実現したいこと

【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で補完される要素への高さ指定がうまくいきませんでした。

イメージ画像

イメージ説明

Comments

[Lhankor_Mhy]

CSSに .mv-slider__item--slider とありますが、HTMLには存在しないクラスのようでした。これはもしかして .mv-slider__item--sub の間違いではないですか？

[退会済みユーザー]

大変失礼いたしました。
Lhankor_Mhy様の仰る通り、.mv-slider__item--subの間違いです。

ご指摘ありがとうございます。

Answer 1

私なら、スライダーを2枚重ねると思います。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/wgn2yL16/

    <section class="mv">
        <div class="mv-slider1">
            <div classs="mv-slider__item">
                <img class="mv-slider__item--main" src="http://placehold.jp/150x150.png?text=slider-img01.png">
            </div>
            <div classs="mv-slider__item">
                <img class="mv-slider__item--main" src="http://placehold.jp/150x150.png?text=slider-img02.png">
            </div>
        </div>
        <div class="skew-line"></div>
        <div class="mv-slider2">
            <div classs="mv-slider__item">
                <img class="mv-slider__item--sub" src="http://placehold.jp/150x150.png?text=slider-img01-sub.png">
            </div>
            <div classs="mv-slider__item">
                <img class="mv-slider__item--sub" src="http://placehold.jp/150x150.png?text=slider-img02-sub.png">
            </div>
        </div>

    </section>

        body {
            background: gray;
        }

        .mv {
            position: relative;
            width: 500px;
            margin: auto;
        }

        .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-slider2 {
            transform: translate(10%, -20%);
        }

        /* .mv-slider {
            position: relative;
            z-index: 10;
        }

        .mv-slider__item--main {
            position: relative;
        }

        .mv-slider__item--sub {
            position: absolute;
            width: 46%;
            top: 70%;
            left: 52%;
            z-index: 40;
        } */

        $('.mv-slider1').slick({
            asNavFor: '.mv-slider2'
        });
        $('.mv-slider2').slick({
            asNavFor: '.mv-slider1'
        });