position：absoluteを設定すると消える

緑の帯部分に画像を重ねていきたいのですが、
belt{position:relative;}
gallery{position:absolute;}(他数値の設定)で画像部分が消えてしまい上手くいきません。
綺麗に重ねたい場合、どうすればよいでしょうか。

    <section id="works">
        <header class="works_header">
            <h2>Works</h2>
            <a href="#main">top</a>
        </header>
        <div class="contents">
            <div class="belt"></div>
        <div class="gallery">
        <div class="contaner">
            <a href="#"><img src="./img/1.jpg"></a>
            <p></p>
        </div>
        <div class="contaner">
            <a href="#"><img src="./img/2.jpg"></a>
            <p></p>
        </div>
        <div class="contaner">
            <a href="#"><img src="./img/3.jpg"></a>
            <p></p>
        </div>
        <div class="contaner">
            <a href="#"><img src="./img/4.jpg"></a>
            <p></p>
        </div>
    </div>

/* works */
#works header{
    box-sizing: border-box;
    margin-bottom: 350px;
    justify-content: space-between;
}
.belt{
    height: 80px;
    background-color:rgba(0,255,0,0.5) ;
    width: 100%;
    z-index: 0;
}
.gallery{
    display: flex;
    justify-content: space-around;
    z-index: 1;
    top: -20px;
}

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

回答2件

こんばんは。
htmlの</div>が一つ抜けています。

<div class="gallery"> <div class="contaner">のどちらかに足りていないこと。それによりCSSはCLASSが指定されたとしてもhtmlにはないクラスに指定されていることになります。なので反応がしないのかも知れません。

投稿2020/06/06 15:58

Shu26

総合スコア72

natsu_kawa

2020/06/06 22:44

ありがとうございます。 </div>にスペースが一行入ってたのが良くなかったみたいです。

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

ベストアンサー

ご質問のhtml、最後の閉じdivお忘れではないでしょうか。

親要素にたいしてabusoluteがはたらくので、子要素をもたないbeltをrelativeにする必要はないとおもいます。
どこかの親要素に.galleryがくっついて迷子になってしまった様子。

.contentsに対して.galleryをabusoluteにすると配置できそうです。justify-contentがついていたので、ついでにwidth:100%つけてました。不要の場合は削除してください。

CSS
1  .contents {
2    position: relative;
3  }
4  .gallery{
5      display: flex;
6      width: 100%;
7      justify-content: space-around;
8      z-index: 1;
9      top: -20px;
10      position:absolute;
11  }

html
1  <header class="works_header">
2      <h2>Works</h2>
3      <a href="#main">top</a>
4  </header>
5  <div class="contents">
6      <div class="belt"></div>
7      <div class="gallery">
8        <div class="contaner">
9            <a href="#"><img src="./img/1.jpg"></a>
10            <p></p>
11        </div>
12        <div class="contaner">
13            <a href="#"><img src="./img/2.jpg"></a>
14            <p></p>
15        </div>
16        <div class="contaner">
17            <a href="#"><img src="./img/3.jpg"></a>
18            <p></p>
19        </div>
20        <div class="contaner">
21            <a href="#"><img src="./img/4.jpg"></a>
22            <p></p>
23        </div>
24      </div>
25  </div>