[HTML/CSS]ファーストビューにスライダーを実装したい

前提・実現したいこと

ファーストビューにスライダーを入れたいです。
スライダー自体はCSSで実装できたのですが、その次のコンテナ（conceptクラス）が
スライダーの上に重なって（浮いた状態で？）表示されてしまいます。
本来だとスライダーのすぐ下に実装されると認識しています。

CSSの「画像の設定」の「position: absolute;」を外せば意図した形（fvクラスの直下にconceptクラスが実装される）にはなりますが、
この方法だとスライダーに使用している画像３枚が縦並びになってしまい、
これ以上どこを改善すれば良いのかがわかりません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <script src=  https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>
8  <link rel="stylesheet" href="css/reset.css">
9  <link rel="stylesheet" href="css/stylesheet.css">
10  <link href=“https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Serif+JP&display=swap” rel=“stylesheet”>
11
12  <title>模写上級</title>
13</head>
14<body>
15<section id="section-01">
16  <header>
17    <p class="header-title"><a href="./">Cresta Design</a></p>
18    <nav class="nav">
19      <ul class="menu-group">
20        <li class="menu-item"><a href="#">Concept</a></li>
21        <li class="menu-item"><a href="#">Service</a></li>
22        <li class="menu-item"><a href="#">Works</a></li>
23        <li class="menu-item"><a href="#">Contact</a></li>
24      </ul>
25    </nav>
26  </header>
27</section>
28
29<section id="section-02">
30  <div class="fv">
31  <h1>Design for Smile.</h1>
32  <p>快適なオフィスをデザインする</p>
33    </div>
34    <div class="slide" id="makeImg">
35      <img src="./img/fv-bgi_01@2x.jpg"   alt="ファーストビュー１">
36      <img src="./img/fv-bgi_02@2x.jpg"    alt="ファーストビュー２">
37      <img src="./img/fv-bgi_03@2x.jpg"    alt="ファーストビュー３">
38    </div>
39</section>
40
41<section id="section-03">
42  <div class="concept">
43    <h2>CONCEPT</h2>
44    <p class="concept-p-title">“働きたくなる空間”をデザインすることで<br>人々を幸せにする。</p>
45    <p class="concept-p-txt">
46      私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</p>
47    <img src="./img/concept-image@2x.jpg">
48  </div>
49</section>
50
51
52  <script src="script.js"></script>
53</body>
54</html>

CSS
1header {
2  display: flex;
3  width: 100%;
4  height: 96px;
5  background-color: #282F35;
6  align-items: center;
7  font-family: 'Noto Serif JP', sans-serif;
8  color: #fff;
9  position: fixed;
10  z-index: 30;
11}
12.header-title {
13  margin-left: 8%;
14  margin-right: auto;
15  font-size: 26px;
16}
17.menu-item {
18  list-style: none;
19  display: inline-block;
20  padding: 10px;
21}
22.menu-group {
23  margin-left: -30%;
24}
25.top {
26  background: url(../img/fv-bgi_01@2x.jpg);
27}
28.fv h1, p {
29  font-family: 'Noto Serif JP', sans-serif;
30  font-weight: 600;
31  z-index: 20;
32  position: relative;
33  color: #fff;
34}
35.fv h1 {
36  top: 480px;
37  left: 100px;
38  font-size: 70px;
39}
40.fv p {
41  top: 520px;
42  left: 120px;
43  font-size: 40px;
44}
45
46// スライド
47 /*=== 画像の表示エリア ================================= */
48 .slide {
49  overflow   : hidden;
50  width      : 100%;
51  height     : 100%;
52  object-fit: cover;
53  margin     : auto;
54  margin-top: -15px;
55  z-index: 30;
56}
57 
58 /*=== 画像の設定 ======================================= */
59.slide img {
60  display : block;
61  // position : absolute;
62  opacity : 0;
63  animation : slideAnime 12s ease infinite;
64}
65 
66 /*=== スライドのアニメーションを段差で開始する ========= */
67.slide img:nth-of-type(1) { animation-delay: 0s }
68.slide img:nth-of-type(2) { animation-delay: 4s }
69.slide img:nth-of-type(3) { animation-delay: 8s }
70 
71 /*=== スライドのアニメーション ========================= */
72@keyframes slideAnime{
73   0% { opacity: 0 }
74   3% { opacity: 1 }
75  33% { opacity: 1 }
76  36% { opacity: 0 }
77 100% { opacity: 0 }
78}
79// スライド終わり

以上、お力を貸していただけると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

スライド画像を画面一杯に広げたいというのが、ご希望だと推測しました。（違ったら指摘してください。）

css
1/*=== 画像の表示エリア ================================= */
2 .slide {
3  overflow   : hidden;
4  width      : 100%;
5  height     : 100%; /* ここ */
6  object-fit: cover;
7  margin     : auto;
8  margin-top: -15px;
9  z-index: 30;
10}

上記の height : 100%; で画面の高さにしているつもりなんだと思いますが、
この 100% の基準は親要素のサイズです。親要素にサイズを指定していないので、この指定は無意味です。

画面の高さを基準にしたいということなら、vh という単位を使ってください。(100vh で画面の高さ)

あと、object-fit: cover; はimg要素に指定するものてす。また、img要素にサイズを指定する必要もあります。

css
1 /*=== 画像の表示エリア ================================= */
2 .slide {
3  overflow   : hidden;
4  width      : 100%;
5  height     : 100vh; /* 修正 */
6/*  object-fit: cover;  削除 */
7  margin     : auto;
8  margin-top: -15px;
9  z-index: 30;
10}
11
12 /*=== 画像の設定 ======================================= */
13.slide img {
14  display : block;
15  position : absolute;
16  width      : 100%; /* 追加 */
17  height     : 100%; /* 追加 */
18  object-fit: cover; /* 追加 */
19  opacity : 0;
20  animation : slideAnime 12s ease infinite;
21}