html - 如何在不使用位置 :absolute? 的情况下保持对齐的同时将一个 div 放在另一个 div 之上

Question

在我尝试创建的简历模板中，我无法将一个矩形放在另一个矩形之上。我希望能够在不使用绝对定位的情况下做到这一点，但经过几个小时的研究后没有任何效果。我尝试使用相对定位并使用 z-index 但没有成功。还有一个问题是最左边的矩形在矩形和页面边缘之间有一些空间。我删除了 A4 页面的左边距，但无论我做什么，容器 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>

存在一些粘贴问题，因此可以在此处找到其余代码: https://jsfiddle.net/p2g95e04/2/

我正在尝试创建与此类似的内容:https://imgur.com/a/eOUGT8n 但是你可以在图片中看到，蓝色矩形本身和我也试图删除的页面边缘之间有一个间隙。如果有人能为我指出正确的方向来解决这两个问题，我将不胜感激。

编辑:间隙问题的清晰度:https://imgur.com/a/UHqORE5

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

Edit2:更改框阴影参数可以消除间隙，但我找不到不移除 A4 纸的情况下保留阴影的方法。

Answer 1

你可以使用负边距，有一个例子

https://jsfiddle.net/Lxterbo4/10/

 <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;
}