slickのスライダーの上部に画像を表示したいがz-indexをつけても反映されない

Question

実現したいこと

slickで実装したスライダーの上部に、丸枠で囲った画像をつけた状態でスライドできるように実装したいです。

発生している問題・分からないこと

該当のソースコード

htmlコード
<section class="slider">
  <h2 class="slider__h2">生徒の声</h2>
  <ul class="slider__container">
    <li class="slider__card">
      <img src="images/student1.jpg" alt="生徒画像１" class="slider__img">
    <p>サンプル１</p>
    </li>
    <li class="slider__card">
    <img src="images/student2.jpg" alt="生徒画像２" class="slider__img">
    <p>サンプル２</p>
    </li>
    <li class="slider__card">
    <img src="images/student3.jpg" alt="生徒画像３" class="slider__img">
    <p>サンプル３</p>
    </li>
    <li class="slider__card">
    <p>サンプル４</p>
    </li>
    <li class="slider__card">
    <p>サンプル５</p>
    </li>
    <li class="slider__card">
    <p>サンプル６</p>
    </li>
    <li class="slider__card">
    <p>サンプル７</p>
    </li>
    <li class="slider__card">
    <p>サンプル８</p>
    </li>
    <li class="slider__card">
    <p>サンプル９</p>
    </li>
  </ul>
</section>


scssコード
.slider {
  background-color: #fff284;
  height: 600px;
  margin-top: 200px;
  padding-top: 120px;
  &__h2 {
    font-size: 48px;
    font-weight: 700;
    color: rgb(27, 27, 27);
    text-align: center;
    margin-bottom: 100px;
  }
  &__container {
    visibility: hidden;
    &.slick-initialized {
      visibility: visible;
    }
  }
  &__card {
    height: 250px;
    margin: 0 20px;
    background-color: pink;
    position: relative;
    z-index: 10;
  }
  &__img {
    width: 150px;
    border-radius: 50%;
    border: 5px solid #28a7de;
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Google検索を行ったが、同じ様な問題は発見されなかった。

補足

特になし

Comments

[ams2020]

「実現したいこと」をもう少し正確に記載いただくことは可能ですか..？
（理想のイメージがいまいち把握できず、欲を言えば図などに起こしてくださると助かります。。）

Answer 1

下記ライブラリを使用しているとすれば、ライブラリ側のCSSで.slick-list に overflow: hidden; が指定されています。

【slick - the last carousel you'll ever need】
https://kenwheeler.github.io/slick/

overflow: visible; を上書きするか、下記のような構成に変えて.slider__wrapの上部にパディングを付けるとかすればよいと思います。

<li class="slider__wrap"><div class="slider__card">
    <img src="images/student2.jpg" alt="生徒画像２" class="slider__img">
    <p>サンプル２</p>
</div ></li>

Comments

[scienceteacher]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
初めて、質問をさせていただいたのですが、こんなに丁寧に教えてくださるんですね😭
世の中の優しさに感謝です！ありがとうございました^ ^