在使用CSS的页面上移动两个HTML元素以使它们重叠的最佳方法是什么

Question

每当我想让两个东西重叠(比如一个图像覆盖另一个图像或其他什么(时，使用边距或填充可以起作用，但它可能会让其他东西无法正常工作(比如文本无法进入下一行或无法再让其他东西重叠(。我想知道这一点，以便将来在任何项目中使用，而不是真正的特定项目，所以我没有代码片段。

Answer 1

对于两个(或至少一个(有问题的元素，我会使用position: relative。

这不会影响该文档中其他元素的位置，因为is不会从正常的文档流中删除这些元素。

然后，通过基于top、right、bottom和left的值使它们中的每一个相对于自身偏移来实现相对定位的元素的重叠。

CSS使2个div垂直重叠10px：

div {
border: 1px solid red;
}
.overlap {
position: relative;  
}
.overlap.one {
bottom: -5px;
}
.overlap.two {
top: -5px;
}

<div>Before</div>
<div class="one">Div One - without overlap</div>
<div class="two">Div Two - without overlap</div>
<div>After</div>
<hr>
<div>Before</div>
<div class="overlap one">Div One - overlapping downwards</div>
<div class="overlap two">Div Two - overlapping upwards</div>
<div>After</div>
<hr>