カルーセルに文字を入れたが、画像の下に文字が入り込んでしまう

Question

カルーセルに文字を入れて、ひとつは画像からはみ出させたいんですが、画像の下に入り込んでしまいます。
二つ目の画像のようにしたいんですが、どうしたらいいでしょうか。

お手数ですが、よろしくお願いいたします。

文字ボックスにz-indexを指定しても、入り込んでしまう・・・
bodyをrerativeにしたら、カルーセルで画像が変わったときに文字ボックスが残ってしまう・・・

<div class="cal">
            <div class="cal-item">
                <picture>
                    <source media="(max-width: 767px)" srcset="../final-exam/images/final-exam-assets/cover/cover_sp_1.jpg">
                    <source media="(min-width: 768px)" srcset="../final-exam/images/final-exam-assets/cover/cover_pc_1.jpg">
                    <img src="../final-exam/images/final-exam-assets/cover/cover_pc_1.jpg" alt="1">
                </picture>
                <div class="cal-t1">
                    <p class="cal-te1">話</p><p class="cal-te12">せる！</p><p class="cal-te2">楽</p><p class="cal-te22">しい！</p>
                </div>
                <div class="cal-t2">
                    <p class="cal-te3">Kira-Kira </p><p class="cal-te32">English</p> 
                </div>
            </div>

.slick-list{
    position: relative;
    margin-left: 27px!important;
    border-radius: 0 0 0 100px!important;
}

.cal-t1{
    position: absolute;
    top: 326px;
    left:0px;
    padding: 10px;
    width: 208px;
    height: 54px;
    border-radius: 0 8px 8px 0;
    background-color: rgba(255,255,255,0.8);
}

.cal-te1,.cal-te12{
    display: inline-block;
    line-height: 1;
    font-size: 25px;
    font-weight: bold;
    color: #f2a118;
}

.cal-te12{
    font-size: 20px;
}

.cal-te2,.cal-te22{
    display: inline-block;
    line-height: 1;
    font-size: 25px;
    font-weight: bold;
    color: #46c017;
}

.cal-te22{
    font-size: 20px;
}

.cal-t2{
    position: absolute;
    top: 388px;
    left:0px;
    padding: 18px 16px 15px 16px;
    width: 210px;
    height: 54px;
    border-radius: 0 8px 8px 0;
    background-color: rgba(255,255,255,0.8);
}

.cal-te3,.cal-te32{
    display: inline-block;
    z-index: 999;
    line-height: 1;
    font-size: 23px;
    font-weight: 800;
    color: #f26618;
    white-space: pre;
}

.cal-te32{
    font-size: 20px;
    color: black;
}

Answer 1

CSSの.slick-listに対応するHTML要素がないですが、これが提示のHTMLの親要素だとすると、
border-radius: 0 0 0 100px!important;で子要素はすべてこの影響をうけて、角丸からはみ出た部分は非表示になります。
画像だけ角丸したいなら、画像の要素に角丸を設定する必要があるのでは。

部分的なコードしか提示されていないので、あくまで参考例ですが、下記のような感じでどうでしょう。

.cal-item picture {
  display:  block;
  border-radius: 0 0 0 100px!important;
  overflow: hidden;
}

Comments

[yura-asuha]

回答ありがとうございました。

おっしゃる通りで、一番上の親要素にpotisionをつけてしまっていたので、入り込んでいました。

本当にありがとうございました。
勉強させていただき、ありがとうございました。