slickのスライダー画像の上にロゴを表示したい

Question

やりたいこと

slick実装したスライダーの各スライドの同じ部分にロゴ画像を載せたい。
レスポンシブ対応でスマホ、パソコン、PCと同じ位置にロゴを載せたい。

試行錯誤しているのですがスマホ、タブレット、パソコンとpositionの設定が上手く行かずズレていて、タブレットではスライダー画像から大きくはみ出してスライダーの遥か下にロゴが表示されたりしてしまいます。

  <main>
        <div class="slider">
          <div><img src="slider/slider1.jpg"></div>
          <div><img src="slider/slider2.jpg"></div>
          <div><img src="slider/slider3.jpg"></div>
          <div><img src="slider/slider4.jpg"></div>
        </div>
        <div class="slider_logo">
          <div class="slider_logo_container">
            <img src="1.png" alt="">
          </div>
        </div>

.silder{
  margin-top:80px;
  vw:100%;
position:relative;
}

.slider img{
  width:100%;
  height: 80vw;
  object-fit:cover;
}
.slider_logo{
  position:absolute;
    right: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:50px;
    @include sp{
      width:200px;
      height:60px;
      top: 0;
      left: 0;
    }
    @include tab{
      width:200px;
      height:60px;
      top: 100px;
      left: 0;
      right: 0;
      bottom: 0;
    }


   .slider_logo_container img{
    width:80%;
    @include sp{
      width:80%;
    }
    @include tab{
      width:80%;
    }
  }
}

Answer 1

.sliderと.slider_logoが別れているところから、
画像は動くけど、ロゴは同じ場所に表示され続けるものだと思って回答します。

.sliderにrelativeを入れても、その内側にあるものにしか効かないので、
以下のように、先のClass2つをまとめて入れるボックスを用意します。

<div class="box">
  <div class="slider"></div>
  <div class="slider_logo"></div>
</div>

.box {
  position:relative;
}
.slider_logo {
  z-index:10;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

これで、2つ(.box含めれば3つ)のClassは同じサイズになるので、.slider_logoの内側に
.slider_logo_containerの記述を入れてleft/right/top/bottomなどで
位置はいくらでも調整できるはず～

Comments

[skyneru]

まさしくこれがやりたかったのです。relativeの指定位置を間違えていたのですね。どうもありがとうございます。

[LibertyBell3]

解決したようでなによりです。

Answer 2

そもそもの設計として複数の画像に1つのロゴ画像を載せるのではなく、複数の画像に1つずつロゴ画像を載せる気がします。

画像の上におしゃれに文字やボタンをのせる方法（CSS）
https://saruwakakun.com/html-css/reference/image-text

ロゴ画像と画像を重ねたものをスライダーするイメージです。
で出来そうな気がしますが確認していません。