ブロックを重ねずに次のブロックに表示させたいです。

ブロックを重ねずに次のブロックに表示させたいです
z-indexを使っていたら、次のブロックが前のブロックに重ねて表示されてしまっています
なので次のブロックをヘッダー画像の下にレスポンシブ対応しつつレイアウトしたいです

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- Bootstrap CSS -->
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9    <link rel="stylesheet" href="style.css">
10    <title>タイトル</title>
11  </head>
12  <body>
13    <nav class="navbar navbar-expand-lg navbar-light pt-4 pb-4">
14      <a class="navbar-brand" href="#">
15        <img class="logo-img" src="img/logo4.png" alt="">
16      </a>
17      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
18        <span class="navbar-toggler-icon"></span>
19      </button>
20      <div class="collapse navbar-collapse" id="navbarNav">
21        <ul class="navbar-nav ml-auto">
22          <li class="nav-item mr-4">
23            <a class="nav-link text-white" href="#">Services</a>
24          </li>
25          <li class="nav-item mr-4">
26            <a class="nav-link text-white" href="#">Publications</a>
27          </li>
28          <li class="nav-item mr-4">
29            <a class="nav-link text-white" href="#">Partners & Career</a>
30          </li>
31          <li class="nav-item mr-4">
32            <a class="nav-link text-white" href="#">News</a>
33          </li>
34          <li class="nav-item mr-4">
35            <a class="nav-link text-white" href="#">About</a>
36          </li>
37          <li class="nav-item mr-4">
38            <a class="nav-link text-white" href="#">Contact</a>
39          </li>
40          <li class="nav-item mr-4">
41            <a class="nav-link text-white" href="#">JP|EN</a>
42          </li>
43        </ul>
44      </div>
45    </nav>
46    <div class="container-fluid">
47      <div class="relative">
48        <div class="col-xs-12 cover-img" style="background-image:url('img/background.jpg');">          
49          <figure class="cover-text text-center">
50            <figcaption class="catch-copy text-white fadein1">
51              <p class="h2">
52                ほげほげほげほげほげげ</br>ほげほげほげほげ
53              </p>
54            </figcaption>
55            <figcaption class="catch-copy-2 text-white fadein2">
56              <p class="h2">
57                hogehogehogehoge</br>hogehogehoge
58              </p>
59              </figcaption>
60          </figure>
61        </div>
62      </div>
63    </div>
64    <!-- Optional JavaScript -->
65    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
66    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
67    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
68    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
69    <script type="text/javascript" src="javascript.js"></script> 
70    <script>
71      $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
72          if(this.id != 'navbarDropdown'){
73            $('.navbar-collapse').collapse('hide');
74          }
75      });
76      </script>
77  </body>
78</html>

html
1 <!-- Portfolioこちらを最後の</div>の後に入れる-->
2      <div id="portfolio">
3          <div class="container-fluid p-0">
4              <div class="row no-gutters">
5                  <div class="col-lg-6 col-sm-6">
6                      <a class="portfolio-box" href="#">
7                          <img class="img-fluid" src="img/background.jpg" alt="" />
8                          <div class="portfolio-box-caption">
9                              <div class="project-category text-white-50">Category</div>
10                              <div class="project-name">Project Name</div>
11                          </div>
12                      </a>
13                  </div>
14                  <div class="col-lg-6 col-sm-6">
15                      <a class="portfolio-box" href="#">
16                          <img class="img-fluid" src="img/background.jpg" alt="" />
17                          <div class="portfolio-box-caption">
18                              <div class="project-category text-white-50">Category</div>
19                              <div class="project-name">Project Name</div>
20                          </div>
21                      </a>
22                  </div>
23                  <div class="col-lg-6 col-sm-6">
24                      <a class="portfolio-box" href="#">
25                          <img class="img-fluid" src="img/background.jpg" alt="" />
26                          <div class="portfolio-box-caption">
27                              <div class="project-category text-white-50">Category</div>
28                              <div class="project-name">Project Name</div>
29                          </div>
30                      </a>
31                  </div>
32                  <div class="col-lg-6 col-sm-6">
33                      <a class="portfolio-box" href="#">
34                          <img class="img-fluid" src="img/background.jpg" alt="" />
35                          <div class="portfolio-box-caption">
36                              <div class="project-category text-white-50">Category</div>
37                              <div class="project-name">Project Name</div>
38                          </div>
39                      </a>
40                  </div>
41                  <div class="col-lg-6 col-sm-6">
42                      <a class="portfolio-box" href="#">
43                          <img class="img-fluid" src="img/background.jpg" alt="" />
44                          <div class="portfolio-box-caption">
45                              <div class="project-category text-white-50">Category</div>
46                              <div class="project-name">Project Name</div>
47                          </div>
48                      </a>
49                  </div>
50                  <div class="col-lg-6 col-sm-6">
51                      <a class="portfolio-box" href="#">
52                          <img class="img-fluid" src="img/background.jpg" alt="" />
53                          <div class="portfolio-box-caption p-3">
54                              <div class="project-category text-white-50">Category</div>
55                              <div class="project-name">Project Name</div>
56                          </div>
57                      </a>
58                  </div>
59              </div>
60          </div>
61      </div>

CSS
1.navbar {
2  position: relative;
3  z-index: 1;
4}
5.logo-img {
6  width: 15vw;
7}
8/* ロゴ画像レスポンシブ */
9@media (max-width: 576px) {
10  .logo-img {
11    width: 60%;
12  }
13}
14.nav-link {
15    font-size: 1.2vw;
16    font-weight: bold;
17    line-height: 1px;
18    font-family: normal;
19}
20.fadein1 {
21  animation: fadein 3s ease-in-out infinite alternate both;
22}
23.fadein2 {
24  animation: fadein 3s ease-in-out 3s infinite alternate both;
25}
26.fadein.scrollin {
27  opacity: 1;
28  transform: translate(0, 0);
29}
30@keyframes fadein {
31  0%{
32    opacity: 0;
33  }
34  20%{
35    opacity: 0;
36  }
37  }
38.cover-img {
39  height: 600px;
40  display: table;
41  width: 100%;
42  background-size: cover;
43  position: absolute;
44  top: 0;
45  left: 0;
46}
47/* ワイドスクリーン用のCSS */
48@media only screen and (min-width: 1500px) {
49  .cover-img {
50    height: 1200px;
51  }
52}
53/* タブレット用のCSS */
54@media only screen and (min-width : 768px) and (max-width : 1200px) {
55  .cover-img {
56    height: 500px;
57  }
58}
59/* スマホ用のCSS */
60@media only screen and (max-width: 479px) {
61  .cover-img {
62    height: 300px;
63  }
64}
65.cover-text {
66  display: table-cell;
67  vertical-align: middle;
68  text-align: center;
69}
70
71.catch-copy p {
72  margin: 0 auto;
73  padding: 0 0.8em;
74  font-size: 3vw;
75  text-align: center;
76}
77/* スマホ用のCSS */
78@media only screen and (max-width: 479px) {
79  .catch-copy p {
80    margin: 0 auto;
81    padding: 0 0.8em;
82    font-size: 3vw;
83    text-align: center;
84  }
85}
86.catch-copy-2 p {
87  margin-top: -7.2vw;
88  font-size: 3vw;
89}
90/* スマホ用のCSS */
91@media only screen and (max-width: 479px) {
92  .catch-copy-2 p {
93    margin: 0 auto;
94    padding: 0 0.8em;
95    font-size: 4vw;
96    text-align: center;
97    margin-top: -40px;
98  }
99}
100#portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl {
101  max-width: 1920px;
102}
103#portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, #portfolio .container-xl .portfolio-box {
104  position: relative;
105  display: block;
106}
107#portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, #portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, #portfolio .container-xl .portfolio-box .portfolio-box-caption {
108  display: flex;
109  align-items: center;
110  justify-content: center;
111  flex-direction: column;
112  width: 100%;
113  height: 100%;
114  position: absolute;
115  bottom: 0;
116  text-align: center;
117  opacity: 0;
118  color: #fff;
119  background-color:red;
120  transition: opacity 0.25s ease;
121  text-align: center;
122}
123
124
125

宜しくお願い致します。

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

回答2件

ベストアンサー

.cover-img をposition: absolute;に設定しているため通常フローから外れて親要素からはないものとして扱われます。
.cover-imgに高さを設定してますが、親要素からは見えないので親要素の高さが0になってます。

高さを親要素に絶対値で設定して、.cover-imgはheight=100%;と相対値で設定すればいいかと思います。

現状は.cover-imgの高さをメディアクエリで段階的に変化させてますので、それを親要素の.container-fluidに変更すればいいでしょう。

ヘッダーブロックnav.navvarと次の背景画像のブロックdiv.container-fluidをdivで囲んで cover-img-wrapperクラスを設定して、

html
1  <div class="cover-img-wrapper">
2    <nav class="navbar navbar-expand-lg navbar-light pt-4 pb-4">
3      <!-- 中略 -->
4    </nav>
5    <div class="container-fluid">
6      <!-- 中略 -->
7    </div>
8  </div>
9  <!-- Portfolioこちらを最後の</div>の後に入れる-->
10  <div id="portfolio">
11          <!-- 後略 -->

CSSは下記で。

css
1.cover-img {
2  height: 100%;  
3  display: table;
4  width: 100%;
5  background-size: cover;
6  position: absolute;
7  top: 0;
8  left: 0;
9}
10.cover-img-wrapper {
11  height: 600px; 
12  position: relative;
13}                
14
15/* ワイドスクリーン用のCSS */
16
17@media only screen and (min-width: 1500px) {
18  .cover-img-wrapper {  /* 修正 */
19    height: 1200px;
20  }
21}
22
23/* タブレット用のCSS */
24
25@media only screen and (min-width: 768px) and (max-width: 1200px) {
26  .cover-img-wrapper {  /* 修正 */
27    height: 500px;
28  }
29}
30
31/* スマホ用のCSS */
32
33@media only screen and (max-width: 479px) {
34  .cover-img-wrapper  {
35    height: 300px;
36  }
37}

投稿2020/10/15 03:06

編集2020/10/15 06:56

hatena19

総合スコア34075

Larkiwing

2020/10/15 05:51

回答ありがとうございます。解決できました。ですが、今度はヘッダー画像がnavの下に位置してしまって、重ねて表示させることができなくなってしまいました。z-indexを使いつつコードをいじっていますが、うまくいきません。回答がございましたら、宜しくお願い致します。

hatena19

2020/10/15 06:19 編集

ヘッダー(nav.navbar) と次の .container-fluid をdivで囲んで、そこに cover-img-wrapperクラスを設定するようにすればいいでしょう。回答も修正しました。

Larkiwing

2020/10/15 06:54

回答ありがとうございます。やりたいことができるようになりました！！('◇')ゞ

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

難しいです。

一応、下記のような感じでそれっぽくはなりますが、navの高さを成り行きにできないです。
構造を見直した方がいいかもしれません。

css
1nav{
2  height: 20vh;
3  box-sizing: border-box;
4}
5.cover-img {
6  height: 100vh;
7}
8.relative{
9  height: 80vh;
10}

投稿2020/10/15 01:23

Lhankor_Mhy

総合スコア36960

Larkiwing

2020/10/15 02:46

回答ありがとうございます。そうですよね。これはちょっとキツイかもです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

ブロックを重ねずに次のブロックに表示させたいです。

関連した質問