Element goes above other element - CSS

Question

I have a hamburger menu inside my website and if I go inside a specific which I have a card with some other elements inside. But if I open the menu while I'm inside the page with this card element the card goes above the menu for some reason. I tried almost everything but I can't get it right. I can't see where is my mistake with the CSS code...

My react component (html):

import TopNavBarMobileComponent from "../TopNavMobileComponent";
import github_icon from '../../assets/github_icon.png'
import instagram_icon from '../../assets/instagram_icon.png'
import my_picture from '../../assets/my_picture.jpg'
import '../../css-mobile/AboutMeStyle.css'

function AboutMeMobile() {
    return (
        <div>
            
            <TopNavBarMobileComponent />

            <div className="info-card-container">

            <aside class="profile-card">

                <div class="mask-shadow"></div>
                <header>
                    <a href="https://github.com/georgesepetadelis/">
                    <img src={my_picture} />
                    </a>
                    <h1 className="name">GEORGE SEPETADELIS</h1>
                    <h2>Software engineer</h2>
                </header>

                <div class="profile-bio">
                    <p>16 y/o and I'm from Greece. I have experience with many programming languages and Frameworks for all mobile platforms like Flutter, React-Native and also native Android and iOS development with Java and Swift. Also I am currently working on Unreal engine and Unity for some big projects. </p>
                </div>

                <ul class="profile-social-links">
                    <li>
                    <a href="https://github.com/georgesepetadelis/">
                        <img src={github_icon} />
                    </a>
                    </li>
                    
                    <li>
                    <a href="https://www.instagram.com/sepetadelhsss/">
                        <img src={instagram_icon} />
                    </a>
                    </li>

                    <li>
                    <a href="https://twitter.com/gsepetadelis">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg" />
                    </a>
                    </li>
                </ul>

        </aside>

            </div>

        </div>

    )
}

export default AboutMeMobile;

My css file:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);

img {
    max-width: 100%;
}

.name {
    margin-top: 7%;
}

.info-card-container {
    z-index: 1;
    margin-top: 15%;
    width: 100%;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.profile-card {
    position: relative;
    width: 90%;
    margin-top: 8%;
    padding: 40px 30px 30px;
    background: #fff;
    border: 5px solid rgba(255,255,255,.7);
    text-align: center;
    border-radius: 8px;
    transition: all 200ms ease;
}

.mask-shadow {
    z-index: -1 !important;
    width: 95%;
    height: 12px;
    background: #000;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    border-radius: 4px;
    opacity: 0;
    border-radius: 80px;
    transition: all 400ms ease-in;
}

.mask-shadow {
    opacity: 1;
    box-shadow: 0px 30px 60px -5px rgba(55,55,71,0.3);
    position: absolute;
}

.profile-card header {
    display: block;
    margin-bottom: 10px;
}

.profile-card header a {
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 100%;
    margin: -120px auto 0;
    box-shadow: 0 0 0 5px #3300ff;
}

.profile-card header a img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

.profile-card header h1 {
    font-size: 20px;
    color: #444;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.profile-card header h2 {
    font-size: 14px;
    color: #acacac;
    text-transform: uppercase;
    margin: 0;
}

.profile-bio {
    font-size: 14px;
    color:#a5a5a5;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 30px;
}

.profile-social-links {
    margin:0;
    padding:0;
    list-style: none;
}

.profile-social-links li {
    display: inline-block;
    margin: 0 10px;
}

.profile-social-links li a {
    width: 55px;
    height:55px;
    display:block;
    background:#f1f1f1;
    border-radius:50%;
    -webkit-transition: all 2.75s cubic-bezier(0,.83,.17,1);
    -moz-transition: all 2.75s cubic-bezier(0,.83,.17,1);
    -o-transition: all 2.75s cubic-bezier(0,.83,.17,1);
    transition: all 2.75s cubic-bezier(0,.83,.17,1);
    transform-style: preserve-3d;
}

.profile-social-links li a img {
    width: 35px;
    height: 35px;
    margin: 10px auto 0;
}

.profile-social-links li a:hover {
    background: #ddd;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

Answer 1

CSS has a 3d object location - the obvious x and y, but there is also a z element. This Z element determines which elements display over others, and which go behind. To set the z element (or index), use the z-index property.