Question

我的问题是背景颜色背后的imgs。实际上，填充顶部：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

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

1 个答案: