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

Question

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

Answer 1

对于所讨论的两个（或至少一个）元素，我会选择 position: relative。

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

然后相对定位元素的重叠是通过基于top、right、bottom和[=16的值相对于自身偏移它们中的每一个来实现的=].

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>

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

What is the best way to move two HTML elements around on a page with CSS so they overlap?

html

css

overlap