質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3900閲覧

slick.jsでのスライダーがうまく表示できない

Ruri5280

総合スコア309

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/12 11:35

slick.jsを使用して、TOPページスライダーを組み込んでいます

画像自体は綺麗に1ページ目、2ページ目とスライドされ表示されるのですが、
画像の上に表示したいDIV要素が、<li>タグ内にあるにも関わらず
2ページ目に重なって表示されてしまいます。

画像は<li>単位で表示できているのに、div要素がなぜ表示されてしまうのかがわかりません。
こちらの解決方法がどうしてもわからず質問させていただきました。

イメージ説明

HTML

1 2<div class="slider-wrap" id="slider-wrap"> 3 <ul class="slider"> 4 <li> 5 <img src="/img/1x/mv-bg1.jpg"> 6 <div class="slider-font"> 7 <p class="slider-p1">1ページ目</p> 8 <h1 class="slider-title">1ページ目</h1> 9 <p class="slider-p2 button-p">1ページ目</p> 10 <p class="slider-p3 button-co">111</p> 11 </div> 12 </li> 13 14 <li> 15 <img src="/img/1x/mv-bg2.jpg"> 16 <div class="slider-font"> 17 <p class="slider-p1">2ページ目</p> 18 <h1 class="slider-title">2ページ目</h1> 19 <p class="slider-p2 button-p">2ページ目</p> 20 <p class="slider-p3 button-co">222</p> 21 </div> 22 </li> 23 </ul> 24</div> 25

CSS

1 2/*----- slider -----*/ 3.slider { 4 position: relative; 5} 6 7.slider img { 8 width: 100%; 9 height: 40vw; 10 object-fit: cover; 11 object-position: 100% 80%; 12} 13 14.slider li div { 15 position: absolute; 16 top: 0; 17 left: 0; 18 width: 100%; 19 height: 40vw; 20 display: flex; 21 flex-direction: column; 22 justify-content: center; 23 align-items: center; 24} 25 26.slider-font a { 27 color: #fff; 28} 29 30.slider-font p { 31 color: #fff; 32} 33 34.slider-font h1 { 35 color: #fff; 36 font-size: 48px; 37 margin-top: 6px; 38} 39 40.slider-p1 { 41 font-size: 14.5px; 42 font-weight: 600; 43} 44 45.slider-p2 { 46 margin-top: 64px; 47} 48 49.slider-p3 { 50 padding: 16px 45px; 51 font-size: 21px; 52} 53 54.slider-p3 span { 55 font-size: 12px; 56} 57 58.slider-wrap { 59 position: relative; 60} 61

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

絶対配置でtopなどの位置指定をした場合、その位置指定の基準は親要素ではなく、包含ブロックと呼ばれるものになります。

こうしてみてはどうでしょうか。

css

1.slick-slide { 2 position: relative; 3}

position が absolute または fixed に設定されている場合、 top プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。

top - CSS: カスケーディングスタイルシート | MDN

 

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

投稿2021/05/13 05:13

Lhankor_Mhy

総合スコア36981

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ruri5280

2021/05/13 23:53

教えて頂いたとおりで実現することができました! >絶対配置でtopなどの位置指定をした場合、その位置指定の基準は親要素ではなく、包含ブロックと呼ばれるものになります。 すごく勉強になりました!有り難うございました!
Lhankor_Mhy

2021/05/14 00:13

お役に立てたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問