如何重叠两个不同的 SVG？

Question

我试图重叠两个以前是一个 SVG 的 SVG - 我只是将层分开以便我有更多的控制权。这是我的代码：<Grid container direction="row" justify="center" style={{ height: '90vh', paddingTop: 80, backgroundImage:`url("/media/bg/bg-2.svg")`, backgroundSize:'cover'}}>                    <Grid item sm={5} style={{ color: 'white', maxWidth: 500, paddingTop: 140 }}>                        <h1 style={{ fontWeight: 700, color: '#E2A2A5' }}> Lorem Ipsum </h1>                        <p style={{fontSize: 20}}>                            Lorem Ipsum                        </p>                    </Grid>                    <Grid item sm={6}>                         <img src={toAbsoluteUrl('/media/images/computer.svg')} alt="computer" />                        <img src={toAbsoluteUrl('/media/images/book.svg')} alt="book" />                                            </Grid>                </Grid>外观如何我的目标是让两个 SVG 像这样重叠在一起我知道这可能是一个 SCSS/CSS 问题，但不知道什么样的代码会给我想要的结果。非常感谢所有帮助:)

Answer 1

您可以将这两个项目的容器设置为position: relative

然后将 svgs 设置为position: absolute

这样，您可以在 svg-s 上设置z-index 以获得深度，这意味着您想要将哪个放在另一个之上。

对于定位，您可以使用bottom、top、left和right将元素放在您想要的位置，您可以更好地控制它们。

编辑：

之所以position: relative重要是因为元素是position: absolute从第一个父节点定位的 position: relative。