スライドする背景画像の上に文字やアイコンを配置したい

前提・実現したいこと

HPの作成を行っています。
タイトルやアイコンが下になってしまい、背景画像に隠れてしまいます。

発生している問題・エラーメッセージ

アイコンやタイトルをスライドする画像の上に配置したいのですが、画像が上になってしまい隠れてしまいます。

該当のソースコード

HTML
<body>
  <header>
    <img src="[pas-pol.jp][622]favicon.ico" alt="logo">
    <h1>PAS-POL</h1>
    <p>旅のモノづくりブランド</p>
    <nav class="nav">
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">PRODUCT</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </header>
  <div class="MainVisual">
    <div class="slider">
      <img src="[pas-pol.jp][212]main_visual_7-0x0.jpg" width="auto" height="auto" alt="">
      <img src="[pas-pol.jp][220]main_visual_13-0x0.jpg" width="auto" height="auto" alt="">
      <img src="[pas-pol.jp][413]main_visual_111-0x0.jpg" width="auto" height="auto" alt="">
      <img src="[pas-pol.jp][514]main_visual_6-0x0.jpg" width="auto" height="auto" alt="">
      </div>
  </div>
</body>

CSS
*{
  margin: 0;
  padding: 0;
}

header{
  width: 100%;
  padding: 15px;
}

.nav li{
display: inline;
text-align: center;
padding: 0 10px;
}

.MainVisual{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-position: 0 bottom;
}

試したこと

floatを用いて画像の上に移動しないか試みる、Z-indexで高さを変える

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

下記のように z-index: -1; を追加したらどうですか。

css
1.MainVisual{
2  position: absolute;
3  bottom: 0;
4  left: 0;
5  width: 100%;
6  height: 100%;
7  background-size: contain;
8  background-position: 0 bottom;
9  z-index: -1; /* 追加 */
10}

投稿2020/07/16 14:18

hatena19

総合スコア34075

TOMZ12

2020/07/16 14:32

自分はアイコンとタイトルのz-indexしか変えてきませんでした… 背景画像の方を変えたら解決しました！本当にありがとうございました。

hatena19

2020/07/16 15:13

z-indexが効かないときは下記をみると大抵解決します。 CSSでz-indexが効かない時の4つの原因とその対応方法 | コリス https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html

TOMZ12

2020/07/17 01:31

ご親切にありがとうございます！とても参考になりました。

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