在div上方的巨大差距同时定位在另一个div上面

Question

我已设法将div置于另一个div的顶部，但我不知道为什么我会在上面获得差距。

查看截图： 多云天空之间和底部蓝色部分之间。

这是css：

/*
 * Hero section 
 */

.hero-section .section-content {
  position: relative;
  top: 70px;
}

.hero-section .section-content h2 {
  font-size: 30px;
}

.hero-section .section-content .btn-primary {
  margin-right: 1px;
}
.sunny {
  width:200px; /*width of your image*/
   height:200px; /*height of your image*/
   background: transparent url("img/sunny.png") bottom right no-repeat;
   border: 2px solid #000;
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

.weather-icon-pos{
    display: inline-block;
    position:relative;
    top:95px;
    width:75%;
  }

请参阅full code on GitHub

任何帮助将不胜感激。

Answer 1

编辑：检查下面的小提琴，了解基本的图像叠加行为。

通用图片叠加示例：

＆＃13;

＆＃13;

.bottom {
  width: 100%;
  height: 52px;
}
.top {
  border: 1px solid red;
  position: absolute;
  top: 8px;
  right: 8px;
}

＆＃13;

<img src="https://placehold.it/200x200" alt="" class="bottom">
<img src="https://placehold.it/50x50" alt="" class="top">

＆＃13;

＆＃13;

＆＃13;

原始答案

您可以通过从position:relative移除section-content来解决此问题，但不了解布局的其余部分。

导致它的是这两个top坐标：

• .weather-icon-pos - top: 95px;
• .hero-section .section-content - top: 70px;

如果你评论它们，你会看到黑色矩形叠加。