What is the best way to combine two distinct SVG images?

I recently separated two SVGs that used to be one combined SVG to have better control over the layers. Now I am trying to overlap them in my code.

Below is the code snippet:

<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>

View the current layout here

My goal is to achieve a stack effect with the two SVGs overlaying each other like shown here

I suspect that the issue lies within the SCSS/CSS styling, and I am seeking guidance on how to achieve the desired outcome through coding solutions.

Your assistance would be highly valued. Thank you! :)

javascriptcssreactjssvg

Answer №1

To create a layered effect with two items, consider wrapping them in a container with the CSS property position: relative

Next, you can set the SVGs to have position: absolute

This allows you to control the stacking order of the SVG elements using the z-index property, determining which one appears on top of the other.

For precise positioning, utilize properties like bottom, top, left, and right to place elements exactly where you want them and maintain full control over their placement.

Edit:

It is crucial to use position: relative because absolutely positioned elements are placed according to their nearest parent element with position: relative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the browser window is minimized, the @media CSS will wrap to the bottom line

When the browser has a standard resolution, the layout looks like this: https://i.sstatic.net/tNR6X.png However, on smaller screens, it appears like this: https://i.sstatic.net/U3RnZ.png Is there a way to adjust the positioning of these blocks using @m ...

htmlcss

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

Is it possible to retrieve a file from a different remote server using AJAX?

Can anyone recommend a remote server URL that provides free files, so I can retrieve them locally using AJAX? var request = new XMLHttpRequest(); request.open('GET', '', false); request.send(); console.log(request); I'm looking t ...

javascriptajax

MUI - fixing the placement within the select box dropdown

I am currently integrating a MUI component into my React JS application. My current task involves adjusting the positioning of the dropdown menu within the select component. In the image displayed, the dropdown menu appears to be slightly shifted to the ...

reactjsmaterial-ui

Provider injection is not possible

Angular Dashboard Creating a dashboard application on Angular 1.6 has been quite the journey. I've defined two static ui.router states within the app - 'home-dashboard' and 'other-dashboard' to register the dashboard components. ...

javascriptangularjsangular-ui-router

MUI Material. Unique variant that respects style and color scheme guidelines

Context Currently, I am working on a small Proof of Concept project for our company. We are reevaluating our partnership with MUI and considering the idea of creating a new UI framework from scratch to customize our apps significantly. I believe this can ...

reactjsmaterial-ui

The latest version of Node Sass, version 6.0.0, does not work well with versions ^4.0.0 or ^5.0.0 of

I attempted to add sass-loader for compiling scss files, but encountered a version compatibility issue. Even after downgrading the version and trying various solutions, the problem persists. Details of my environment: React version- 17.0.2 Node versi ...

reactjssasscreate-react-appnode-sasssass-loader

oidc-client.js throws an error stating that no authority was provided

As someone new to SSO, I have recently been immersed in a project that utilizes OIDC. My focus has been on using oidc-client to address the issues at hand. Below are my settings (with some details redacted for privacy). var mgr = new Oidc.UserManager({ ...

javascriptvue.jssingle-sign-onopenid-connectoidc-client-js

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Trouble detecting click event in jQuery after triggering radio button in HTML

Encountering a peculiar jQuery issue where triggering a click on a radio button does not fire completely and is ignored by an on click function, while a similar call to the jQuery trigger method is successfully captured. In the below jQuery snippet, a < ...

javascriptjqueryonclickradio-buttoneventtrigger

Dispatch an angular POST Request

I am facing an issue where Angular is sending a GET request instead of a POST request when I want to send a post request. The code for my Angular request is as follows: $http({ method: 'POST', url: pages_url, params: { ...

javascriptangularjspostrequest

Using NicEdit for uploading to your personal server

I'm having trouble uploading images using the NicEdit WYSIWYG editor on my own server. When I click on the upload image button, it redirects me to another site where I can upload the image: imgur dot com You can find a demo of this here: However, I ...

phpjavascriptajaxnicedit

I am experiencing an issue where the text is not appearing in my Bootstrap

As a newcomer to Bootstrap and CSS, I'm aware that my question might reflect my lack of experience in these areas. Here is my query: Scenario: I am utilizing Bootstrap along with the [Grayscale theme] to create a basic tool that will assist my stude ...

htmlcsstwitter-bootstrap

Comparing identical elements in JavaScript

Crucial Note I want to clarify that I have no intentions of scamming, phishing, or causing any harm. My goal is to develop a website magnifier similar to using a magnifier on paper. Dilemma Let me paint the picture for you. I've effectively copied ...

javascripthtml

Mastering the art of constantly monitoring data changes in a Firebase real-time database using Vue.js

I am currently utilizing vue.js version 2 in CDN mode. I have designed 2 vue components - one that pushes data to a database and another that displays it. Here is the code snippet: firebase.database().ref().on('value', function (data) { c ...

javascriptfirebasefirebase-realtime-databasevuejs2vue-component

Obtain the value of the nth child in jQuery without referencing the HTML tag

I need to work with the number 1.99 in my calculations, but it is preceded by a dollar sign which is subject to change. $(function() { const x = $('#test').text(); console.log(x); console.log(Number(x) + Number(x)); }); <script src="https://cd ...

javascripthtmljquerywordpresswoocommerce

Troubleshooting: React UseEffect Ineffective Rendering

Having trouble rendering data from state using useEffect, even though it's retrieving the data correctly but running twice. I only need it to render once and not get updated. Here is an excerpt from the JSON data file 'moviedetails.json': [ ...

reactjsuse-effect

How to create an onClick event handler in ReactJS and pass 'this' parameter

Here is the code for my component: import React, {PropTypes} from 'react'; export default class Viewdesc extends React.Component { render() { return ( <div className="col-md-12 slide-row"> <div className="col-md-12 overview- ...

javascriptreactjsexpress

Tips for properly typing action creators connected to properties in react-redux

Within our project, all action creators are structured in the following manner: export const actionCreatorFunctionName(arg1, arg2...) { return (dispatch: Dispatch, getStore: () => StoreState) => { // ... function logic ... dispat ...

reactjstypescriptreduxreact-redux

Utilize AJAX to fetch and load JSON data for use in a different function

When a button is triggered, I have two functions that run. One function is called immediately, while the other is called once the processing triggered by the button is complete. I want to optimize the loading time by loading the JSON data from the AJAX req ...

javascriptjqueryjsonajax