时间戳

首页 > 解决方案 > 如何在不使用 position:absolute 的情况下将 div 放置在另一个 div 之上，同时保持对齐？

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

问题描述

我在尝试创建的简历模板中将一个矩形放在另一个矩形上时遇到问题。我希望能够在不使用绝对定位的情况下做到这一点，但经过几个小时的研究后没有任何效果。我尝试使用相对定位并使用 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 纸的情况下保持阴影的方法。

标签： htmlcss

解决方案

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

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

推荐阅读