如何在 React 中将一个图像叠加在另一个图像之上而不向下移动其他组件?

所以在我网站的主页上,我有一个背景图片,上面有一些内容。但是,根据新设计,我还需要在内容左侧包含另一个图像而不移动其位置。以下是它的外观:

enter image description here

但是现在,我对这个设计的实现看起来像这样:

enter image description here

也就是说,由于纸飞机图像的加入,页面中心的内容被下推了。我想要做的是将纸张放置图像放在屏幕最左侧的中心内容旁边,根本不移动中心内容。有没有办法用 React 和 CSS 做到这一点? (如果有帮助,我也在使用 AntDesign)

stack overflow How to overlay one image on top of another in React without moving other components down?
原文答案

答案:

作者头像

您可以通过 2 种方式解决此问题

  1. 将要在左侧的另一张图像的位置设置为绝对位置。

  2. 如果您希望这 2 个图像作为背景图像,那么您可以使用多个背景图像并分别指定背景位置。例如

    .background-image: url("path to image 1"), url("path to image 2");background-position: center center, left bottom;

作者头像

我使用父容器将图像定位为相对,将内部 div 定位为 position:absolute;
例如,如果父 div/container 是 100vh100vw (绝对位置),使用这些 CSS 属性设置内部 div 位置将使内部 div 居中:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

完整的例子可以从 W3School 中找到 here