How can I display text in front of an SVG Image? When I try to do this, the text keeps getting hidden behind the image.
This is how my CSS code looks:
.Default_View_Text___{
position: relative;
margin-top: 190px;
margin-left: 30px;
top:25.05%;
z-index: -10px;
font-family: 'Poppins';
font-weight: bold;
font-size: 17px;
color: #1A73E8;
}
I really need to fix this issue. How can I make sure that the text appears in front of the SVG?
Edits Made:
Here is a snippet of the HTML code:
import React from 'react';
import logo2 from './logo2.svg';
import clock from './clock.svg';
import msgbox from './msgBox.png'
import bellicon from './bell-icon.png'
import tab from './tab.svg';
import vis from './vis.svg';
import './HomeDashboard.css'
const DashBoard = () => {
return (
<div className="BBDashBoard__">
<div className="DashBoardSideBar__">
</div>
<div className="TopBarNav___">
<img src={logo2} className="betaLogo__" alt="logo" /><span className="NameSpecHolder__"> Welcome, <strong className="DisplayName__">John</strong> <button className="DispAminName__">Admin</button><img src={msgbox} className="MessageAreaBox__" /><img src={bellicon} className="BellIcon__" /></span>
</div>
<div>
<h4 className="MainPageExTap__">Estimates</h4>
</div>
<div>
<h4 className="MainPageExTap__2__">Recently added</h4>
</div>
<div>
<h4 className="Default_View_Text___">Default View</h4>
</div>
<div>
</div>
<div>
<div className="TableCustomersBleBg__">
<img src={tab} className="blueBg__"/>
</div>
<div className="TablesCustomerWhiteBg__">
<img src={vis} className="whiteBg__"/>
</div>
<div>
<table border="0" width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
);
}
export default DashBoard;
This is a condensed version of the HTML code as the CSS part was quite lengthy and had to be trimmed down.