Vue + Laravel プロジェクトの vue-awesome-swiper では Z-index が機能しません

Question

私は Vue LAravel プロジェクトで vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper を使用しています。

これが私が達成したい結果です。スライド矢印は上部にあり、クリック可能です。

代わりに、私が実装しているのはこれです。スライド矢印は上部になく、クリックできません。

vue-awesome-swiper が動作するには、コードが特定の形式に従う必要があります。

これは私が使用しているスワイプ コードです:

リーリー

これはスライダーのスクリプトです:

リーリー

これらのスタイル:

リーリー

ご覧のとおり、スワイパー ボタンの Z インデックスは高くなりますが、.swiper-caption div の上にはありません。次のように、スライドボタンとスライドタイトルが同じ div に配置されるように HTML コードの構造を変更してみました。 リーリー

しかし、上記のコードを使用すると、結果は次のようになります。スライド ボタンとスライド タイトルが消えました。おそらく、vue-awesome-swiper 構造では、スライド ボタンを別の div 内に配置できないためです。何故かはわからない。

正しい結果を得る方法について何か提案はありますか?

Answer 1

999999 z-index 値、子要素の相対位置、絶対位置、あるいはその両方を使用してみてください。