Html 如何将一个div放置在另一个div的顶部，同时保持对齐而不使用position:absolute？

在我试图创建的简历模板中，我很难将一个矩形放在另一个矩形上。我希望能够做到这一点，而不使用绝对定位，但没有工作后，几个小时的研究。我试着使用相对定位和z指数，但没有成功。还有一个问题，最左边的矩形在矩形和页面边缘之间有一些空间。我删除了A4纸上的左边距，但不管我做什么，container div和A4纸之间仍然有一个间隙。任何帮助都将不胜感激

有关守则：

<page size="A4">
<div class="container">
    <div class="over-rect"></div>
    <div class="blue-rect">
        <span class="name">Name</span>
        <div class="icon">
            <img class="education" src="img/education.png">
        </div>
    </div>
</div>
</page>

名称

存在一些粘贴问题，因此可以在此处找到其余代码：

我试图创造类似的东西： 然而，你可以在图片中看到，蓝色矩形在它自身和我试图移除的页面边缘之间有一个间隙。如果有人能为我指出如何解决这两个问题的正确方向，我将不胜感激

编辑：明确差距问题：

如果我删除外部容器div，它会解决问题，但会把其他事情弄糟，所以我想知道如何让它在容器div内部工作

---

编辑2：更改框阴影参数可以消除间隙，但我找不到一种方法来保持阴影，而不删除A4纸张。

您可以使用负边距，这里有一个示例

名称
.过直{
边缘顶部：20px；
背景：红色；
宽度：100%；
高度：50px；
显示：块；
}
.container>div.blue-rect>span.name{
字体大小：粗体；
颜色：白色；
字体大小：35px；
利润上限：-50px；
}

在您共享的图像中，似乎您希望为Name赋予红色背景？@SwaroopDeval这是正确的，但我希望使用单独的矩形，这样我也可以将它们放置在蓝色矩形的其他位置。不建议不使用负边距吗？为什么这在一开始就奏效了？此外，蓝色矩形与页面左侧仍有间隙的问题仍然存在。负利润率也能解决这个问题吗？为了澄清间隙问题：您可以真正地去掉第二个容器，使用背景色/图像，负边距在这里起作用，因为div.over-rect位于名称span.name之前，并且默认情况下，较低的z-index元素重叠的顺序是delcare，除非被z-index属性覆盖。您的填充问题是因为css框架为容器提供了一个填充，您只需要像覆盖负边距I一样覆盖它我想不出任何反对的理由，但正如上面的评论所提到的，可能有更好的解决方案，但是你的问题是如何在没有绝对头寸的情况下将一个div置于另一个div之上，负保证金就是这个问题的答案。

 <div class="blue-rect">
   <div class="over-rect"></div>
     <span class="name">Name</span>
     <div class="icon">
       <img class="education" src="img/education.png">
     </div>
 </div>


.over-rect {
  margin-top: 20px;
  background: red;
  width: 100%;
  height: 50px;
  display: block;
}

.container>div.blue-rect>span.name {
    font-weight: bold;
    color: white;
    font-size: 35px;
    margin-top: -50px;
}