0

I am trying to overlap two SVGs that were previously one SVG - I just separated the layers so I would have more control.

Here is my code:

<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

My aim is to get the two SVGs sitting on top of each other like this

I am aware that it may be a SCSS/CSS problem, but no idea what kind of code would give me the desired results.

All help greatly appreciated :)

Adam Bishop
  • 3
  • 3

1 Answers1

1

You can set a container of those 2 items to position: relative

And then set svgs to have position: absolute

That way, you can set z-index on svg-s for depth, meaning which one you want to go on top of other.

And for positioning you can use bottom, top, left and right to put elements in a place you want to and you would have more control over them.

Edit:

The reason why position: relative is important is because elements that are position: absolute are positioned from there first parent node that is position: relative.

pavlovic265
  • 491
  • 2
  • 8
  • Would suggest making only one absolute, so the sizes will be the same – Emre Koc Jul 24 '20 at 04:44
  • I will update answer about `position: relative`. Element who are position absolute are position from there first relative parent. In this case that would be container – pavlovic265 Jul 24 '20 at 04:51