画像下に文字がいかない

Question

こんばんは。

三枚の画像をスライドショーで表示させた後の
HTML記載のdivやfooterなどすべてスライドショー画像の裏に行ってしまいます。

スライドショーのあとに普通にコンテンツを追加していきたいのですが、
うまくいきません＞＜

下記がコードになります。

html, body {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
}

.container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}


/*中間は省略*/

.slider_fade {
  position: relative;
}

.slider_fade > li {
  position: absolute;
  list-style: none;
  visibility: hidden;
  animation: anime_slider_fade 12s 0s infinite;
  width: 70%;
  margin: 0 auto;
}
.slider_fade > li:nth-of-type(2) {
  animation-delay: 4s;
}
.slider_fade > li:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes anime_slider_fade {
  0% {
      visibility: visible;
      opacity: 0;
  }
  15% {
      opacity: 1;
  }
  33.3% {
      opacity: 1;
  }
  48.3% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}

HTML

<!---スライドショーから--->

 <ul class="slider_fade">
        <li><img src="./images/ohuse.png"></li>
        <li><img src="./images/onde.png"></li>
        <li><img src="./images/hei.png"></li>
    </ul>

</div>

<article>
        あああああああああああああああああああ
</article>

スライドショーの下には説明文、
もっと下にはアクセスや注文の流れ、フッターなど
続けたいのですが、すべてスライドショー画像の下でしか表示されません。
ネットでいろいろ調べてみましたがお手上げです。

どなたかご教授いただければ幸いでございます。

Answer 1

slide_fadeの子要素はすべてdisplay: absolute;で通常のレイアウトから外されています。
そのためslide_fadeは何もコンテンツを持っていないのと同じで、高さがありません。
ですから続く要素はslide_fadeとほぼ同じ位置からレイアウトされてしまいます。

一番簡単な解決方法は、

.slider_fade {
  height: 300px;
}

のようにslide_fadeボックスに明示的に高さを与えることです。

Comments

[AyakaFujimoto]

itagagaki様
試してみると、できました！
本当に本当にありがとうございました＞＜！