HTML背景画像の上にボックス配置

Question

前提・実現したいこと

HTMLで背景画像を設定し、その大きな背景のうえに、左上にtopというｸﾘｯｸﾎﾞｯｸｽを置き
そのtopの下にリストを表示させたいのですが、topはうまくいっているのですがabcのﾘｽﾄが表示されせん。
わかるかたいましたらお願いします。

該当のソースコード

<div class ="contents-1"> <div class ="top"> <h1>TOP</h1> </div> <div class ="list"> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </div>

<-----CSS----->

.contents-1{

bac height:1000px;
width:100%;
background-image:url("image");
background-size:100% 100%;
background-repeat : no-repeat;
margin:0 auto;
z-index: auto;
font-size:100%;

}

.top{
position:absolute;
z-index:2;
color:green;
background-color:yellow;
}

.list{
z-index:2;
}

試したこと

背景のpxを指定したら背景が一旦きえたりしましたが
原因はなんなんでしょう？

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

ATOM

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

Answer 1

position:absolute; を設定すると通常フローから外れて浮いた状態になります。
そのため、後の要素(.list)がその分上に移動して.top の背面に隠れて見えなくなってます。

.top の高さ分の padding-top を.listに追加して位置を下げればいいでしょう。

.top{
  position:absolute;
  color:green;
  background-color:yellow;
}

.list{
  padding-top: 95px;
}

あるいは、.top を左上に配置したいだけなら、position:absolute; を使わずに適切な width と height を設定すればいいでしょう。

.top{
  width: 80px;
  height: 50px;
  text-align: center;
  color:green;
  background-color:yellow;
}

Comments

[tsurutsuru649]

回答遅れました。
うまく表示されました。別のliのcssがかかっていて表示がおかしくなっていたようです。
大変わかりやすく理屈を説明していただきありがとうございます！！