如何重叠两个不同的 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>

How it looks

我的目标是让两个 SVG 像 this 一样叠放在一起

我知道这可能是 SCSS/CSS 问题，但不知道什么样的代码会给我想要的结果。

非常感谢所有帮助:)

Answer 1

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

然后将svgs设置为position: absolute

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

对于定位，您可以使用 bottom、top、left 和 right 将元素放置在某个位置您愿意，并且您可以更好地控制它们。

编辑：

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