css - How to prevent Navbar going under elements on mobile?

Question

I have a responsive Navbar with hamburger for mobile (in React) and when it expands from off screen it floats under my form element as opposed to overlaying the whole screen. The transition and styling is all perfect. I have tried z-index and changing position settings and cant get this to work at all.

Nav

nav {
    display: flex;
    justify-content: space-around;
}

media - 
 .nav {
        z-index: 1000;
    }

    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #5D4994;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
    }

    .nav-links-toggle {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1000;
    }

jsx

<nav className = {toggle ? 'nav-active' : ''}>
            <div className = "logo">
                <img src = {logo} alt = 'logo' className='logo-pic' />
                <p>HearthStone Deck Creator</p>
            </div>
            <ul className = {toggle ? 'nav-links-toggle' : 'nav-links'} id = "nav">
                <li><Link to ='/'>Home</Link></li>
                <li><Link to ='/deckbuilder'>DeckBuilder</Link></li>
                <li><Link to ='/contact'>Contact</Link></li>
                <li><Link to ='/about'>About</Link></li>

            </ul>
            <div className={toggle ? 'toggle burger' : 'burger'} id = "burger" onClick = {handleClick}>
                <div className="line1"></div>
                <div className="line2"></div>
                <div className="line3"></div>
            </div>
        </nav>

form css

.input-search {
    width: 60vw;
    height: 6vh;
    border-radius: 10px;
    font-size: 1.5rem;
    transition: all 0.30s ease-in-out;
    outline: none;
    margin-bottom: 1.8rem;
    padding: 3px 0px 3px 3px;
    border: 1px solid #DDDDDD;
}

    


  [1]: https://i.stack.imgur.com/qTmeJ.png
  [2]: https://i.stack.imgur.com/GvVY7.png

question from:https://stackoverflow.com/questions/65902710/how-to-prevent-navbar-going-under-elements-on-mobile

Answer 1

I have fixed this with setting postion:relative and the z-index.

I then had to add a lower z-index to elements that would be covered

little bit of a bodge, but its working perfectly