html - 为什么我的背景颜色在我的 imgs 之上？

Question

我的问题是背景颜色后面的 imgs。事实上，padding-top:100px.. 当我在 0px 处填充顶部时它很好。即使我的两个 div 没有背景颜色，也会发生这种情况。当我检查元素时，img 明显在背景后面

HTML

<div id="hiw1">
  <img src="images/collegemap.png" class="hiwImg" />
  <h3>Choose the colleges</h3>
  <h5>Pick as many schools as you'd like.</h5>
</div>

<div id="hiw2">
  <img src="images/collegemap.png" class="hiwImg" />
  <h3>Book your <span class="green">Visits</span>.</h3>
  <h5>Make sure to find a date you are available.</h5>
</div>

<div id="hiw3">
  <img src="images/collegemap.png" class="hiwImg" />
  <h3>Take the IV survey.</h3>
  <h5>This helps us match you to the right Insider.</h5>
</div>

<div id="hiw4">
  <img src="images/collegemap.png" class="hiwImg" />
  <h3>Meet your Insider and enjoy!</h3>
  <h5>Don't forget to tip!</h5>
</div>

CSS

.hiwImg {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  padding-top: 100px;
  position: absolute;
  left: 500px;
}
#hiw1 {
  background-color: none;
}
#hiw2 {
  background-color: black;
  color: white;
  height: 100%;
}
#hiw3 {
  background-color: none;
}
#hiw4 {
  background-color: black;
}

Answer 1

您可以使用 z-index 属性来更改图像层，但据我所知，您的代码没有问题。

.hiwImg {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  padding-top: 100px;
  position: absolute;
  left: 500px;
  z-index:100;
}
#hiw1 {
  background-color: none;
}
#hiw2 {
  background-color: black;
  color: white;
  height: 100%;
}
#hiw3 {
  background-color: none;
}
#hiw4 {
  background-color: black;
}

这是链接http://embed.plnkr.co/IouCZgUxWhkOWy0RJBGI/preview