如何重叠两个不同的 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&nbsp;以获得深度，这意味着您想要将哪个放在另一个之上。对于定位，您可以使用bottom、top、left和right将元素放在您想要的位置，您可以更好地控制它们。编辑：之所以position: relative重要是因为元素是position: absolute从第一个父节点定位的&nbsp;position: relative。