背景画像が一番下にならない

HTML
1  <header>
2    <div class="header-left">
3      <a href="#">
4      <div class="logo">
5        <img src="paspol_images/logo.png">
6          </div>
7        <div class="header-info">
8          <h1>PAS-POL</h1>
9          <p>旅のモノづくりブランド</p>
10        </div>
11      </a>
12    </div>
13
14    <div class="header-right">
15      <ul>
16        <li><a href="#">TOP</a></li>
17        <li><a href="#">PRODUCT</a></li>
18        <li><a href="#">ABOUT</a></li>
19        <li><a href="#">NEWS</a></li>
20        <li><a href="#">CONTACT</a></li>
21      </ul>
22    </div>
23
24    <div class="header-bottom">
25      <a href="#">
26      <div class="bottom-item">
27        <img src="paspol_images/down_allow.png">
28      </div>
29      </a>
30    </div>
31  </header>

CSS
1header {
2  height: 585px;
3  width: 100%;
4  background-image: url(paspol_images/main_visual.jpg);
5  background-size: cover;
6  border-bottom-right-radius: 600px 30px;
7  border-bottom-left-radius: 600px 30px;
8  color: white;
9  display: block;
10  position: relative; 
11}
12
13header::after {
14  content: "";
15  display: block;
16  background-color: #F6F6F6;
17  position: absolute;
18  width: 100%;
19  height: 100%;
20  z-index: -1;
21}
22
23
24.header-left {
25  display: inline-block;
26  margin-top: 50px;
27  margin-left: 95px;
28}
29
30.header-left:hover{
31  opacity: 0.8;
32  transition: all 0.3s
33}
34
35.header-info{
36  float: left;
37  color: white;
38  margin-top:10px;
39}
40
41.header-info h1{
42  font-size: 30px;
43  letter-spacing: 6px;
44}
45
46.header-info p{
47  font-size: 7px;
48  letter-spacing: 3px;
49}
50
51.logo{
52  float: left;
53  padding-right:25px;
54  width: 75px;
55  height:75px;
56}
57
58.logo img{
59  width: 75px;
60  height:75px;
61}
62
63.header-right {
64  float: right;
65  margin-right: 55px;
66}
67
68.header-right li {
69  padding: 85px 40px 0 0;
70  display: inline-block;
71  font-size: 13px;
72}
73
74header li a{
75  color:white;
76  text-decoration: none;
77}
78
79header li a:hover{
80　text-decoration: underline;
81  border-bottom: solid 2px white;
82  padding-bottom: 10px;
83}
84
85.header-bottom{
86  text-align: center;
87}
88
89.bottom-item{
90  margin-top: 400px;
91  width: 25px;
92  height:15px;
93}
94
95.bottom-item img{
96  width: 25px;
97  height:15px;
98}
99
100
101
102.header-left:hover{
103  opacity: 0.8;
104  transition: all 0.3s
105}

header-bottom部分の画像を背景画像より上（前?）に持ってきたいのですが
背景画像の下（後ろ）になってしまいます。

z-indexやposition: absolute;を使ってみたのですが
どうしても前側にきません。。。

Lhankor_Mhy

2020/07/28 09:49 編集

「背景画像」とはmain_visual.jpgのことですか？そうであるならば、問題が再現しませんでした。当方の環境では、背景画像より前面に出ています。 ↓ご提示のコードでサンプルを作成しました。 https://jsfiddle.net/Lhankor_Mhy/dLep3rm0/ _arukunekoさんの環境では、やはり背景の前面に出てきていないですか？

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

回答1件

ベストアンサー

まず、marginで位置を決めるのは気持ち悪いのでやめましょう。
headerにposition: relative; があるなら子要素にposition: absolute;を使い位置指定をしましょう。

上記を、前提として修正させていただきました。
*見易くするために色を変えています。

<style>
header {
  height: 585px;
  width: 100%;
  background-image: url(paspol_images/main_visual.jpg);
  background-size: cover;
  background-color: #ccc;
  border-bottom-right-radius: 600px 30px;
  border-bottom-left-radius: 600px 30px;
  color: white;
  display: block;
  position: relative; 
}
header::after {
  content: "";
  display: block;
  background-color: #F6F6F6;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.header-left {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 95px;
}
.header-left:hover{
  opacity: 0.8;
  transition: all 0.3s
}
.header-info{
  float: left;
  color: white;
  margin-top:10px;
}
.header-info h1{
  font-size: 30px;
  letter-spacing: 6px;
}
.header-info p{
  font-size: 7px;
  letter-spacing: 3px;
}
.logo{
  float: left;
  padding-right:25px;
  width: 75px;
  height:75px;
}
.logo img{
  width: 75px;
  height:75px;
}
.header-right {
    position: absolute;
    top: 85px;
    right: 95px;
}
.header-right li {
    margin-left: 40px;
  display: inline-block;
  font-size: 13px;
}
header li a{
  color:white;
  text-decoration: none;
}
header li a:hover{
　text-decoration: underline;
  border-bottom: solid 2px white;
  padding-bottom: 10px;
}
.header-bottom {
    text-align: center;
    background: #000;
    position: absolute;
    top: 400px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
}
.bottom-item{
  width: 25px;
  height:15px;
}
.bottom-item img{
  width: 25px;
  height:15px;
}
.header-left:hover{
  opacity: 0.8;
  transition: all 0.3s
}
</style>