How to put responsive menu to overwrite

Question

Hello, how do I put this responsive menu to appear in front?

<header class="box-header">
            <div class="box-topo">
                <a href="<?php echo base_url(); ?>"><h1></h1></a>
            </div>
            <div class="box-menu">
                <input type="checkbox" id="btn-menu" >
                <label class="btn-menu" for="btn-menu">&#9776;</label>
                <nav class="menu">
                    <ul>
                        <li><a href="<?php echo base_url(); ?>">Página Inicial</a></li>
                        <li><a href="#perfil">Profissional</a></li>
                        <li><a href="#projetos">Projetos</a></li>
                        <li><a href="#certificados">Certificados</a></li>
                        <li><a href="">Blog</a></li>
                    </ul>
                </nav>
            </div>
        </header>


@media screen and (max-width: 640px){

    #btn-menu{
    } 

    .btn-menu{
        display: block;
    }
    .box-topo{
    }

    .box-header{
    }


    #btn-menu:checked ~ .menu{
        margin-right: 0%;
    }

    .menu{
        margin-top: 2%;
        background-color: #363563;
        width: 55%;
        margin-right: -100%;
        float: right;
        padding: 1%;
        z-index: 999;
    }

    .menu ul{
        margin: 0;
        display: inline-block;
        position: static;
        overflow: hidden;
        transition: all .4s;

    }

    .menu ul li{
        margin-left: 4%;
        float: none;
    }

    .menu ul li a{
        font-size: 1.4em;
    }

Answer 1

The z-index will only take effect if the element has position:

The z-index CSS Property specifies the z-order of a positioned element and its Descendants[...]

The estate z-index specifies the z-order of an element positioned and their descendants.

• MDN documentation.

Insert position: relative; in class .menu that solves the problem:

@media screen and (max-width: 840px){

    #btn-menu{
    } 

    .btn-menu{
        display: block;
    }
    .box-topo{
    }

    .box-header{
    }


    #btn-menu:checked ~ .menu{
        margin-right: 0%;
    }

    .menu{
        margin-top: 2%;
        background-color: #363563;
        width: 55%;
        margin-right: -100%;
        float: right;
        padding: 1%;
        z-index: 999;
        position: relative;
    }

    .menu ul{
        margin: 0;
        display: inline-block;
        position: static;
        overflow: hidden;
        transition: all .4s;

    }

    .menu ul li{
        margin-left: 4%;
        float: none;
    }

    .menu ul li a{
        font-size: 1.4em;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<header class="box-header">
            <div class="box-topo">
                <a href="<?php echo base_url(); ?>"><h1>Isaque Saraiva</h1></a>
            </div>
            <div class="box-menu">
                <input type="checkbox" id="btn-menu" >
                <label class="btn-menu" for="btn-menu">&#9776;</label>
                <nav class="menu">
                    <ul>
                        <li><a href="<?php echo base_url(); ?>">Página Inicial</a></li>
                        <li><a href="#perfil">Profissional</a></li>
                        <li><a href="#projetos">Projetos</a></li>
                        <li><a href="#certificados">Certificados</a></li>
                        <li><a href="">Blog</a></li>
                    </ul>
                </nav>
            </div>
        </header>
<main style="position: fixed; background: red;">
ashsag ashgasg assag ashgsah asgsahg hsag hash ashsag sahagsh sahgasgashgas ash sahgsah sah sahgsah gsah hsagsahgsah gahsghsa sahas hsa ghas 
</main>

See below that without a position z-index does not work:

@media screen and (max-width: 840px){

    #btn-menu{
    } 

    .btn-menu{
        display: block;
    }
    .box-topo{
    }

    .box-header{
    }


    #btn-menu:checked ~ .menu{
        margin-right: 0%;
    }

    .menu{
        margin-top: 2%;
        background-color: #363563;
        width: 55%;
        margin-right: -100%;
        float: right;
        padding: 1%;
        z-index: 999;
        /* position: relative; */
    }

    .menu ul{
        margin: 0;
        display: inline-block;
        position: static;
        overflow: hidden;
        transition: all .4s;

    }

    .menu ul li{
        margin-left: 4%;
        float: none;
    }

    .menu ul li a{
        font-size: 1.4em;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<header class="box-header">
            <div class="box-topo">
                <a href="<?php echo base_url(); ?>"><h1>Isaque Saraiva</h1></a>
            </div>
            <div class="box-menu">
                <input type="checkbox" id="btn-menu" >
                <label class="btn-menu" for="btn-menu">&#9776;</label>
                <nav class="menu">
                    <ul>
                        <li><a href="<?php echo base_url(); ?>">Página Inicial</a></li>
                        <li><a href="#perfil">Profissional</a></li>
                        <li><a href="#projetos">Projetos</a></li>
                        <li><a href="#certificados">Certificados</a></li>
                        <li><a href="">Blog</a></li>
                    </ul>
                </nav>
            </div>
        </header>
<main style="position: fixed; background: red;">
ashsag ashgasg assag ashgsah asgsahg hsag hash ashsag sahagsh sahgasgashgas ash sahgsah sah sahgsah gsah hsagsahgsah gahsghsa sahas hsa ghas 
</main>