CSS absolute positioned elements make underneath inputs unclickable

#iphone_container {
    position: relative;
    display: inline-block;
    padding: 15px 15px;
    z-index: 0;
}
#iphone {
    position: relative;
    z-index: 1;
    max-height: 75vh;
}
#contact__address {
    padding: 2vh 10vh;
    background-color: rgba(48, 60, 81, 0.67);
    opacity: 0.67;
}
#contact__address p {
    color: white;
}
#contact__iphone_picto {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 35%;
}
#iphone_screen {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    background: linear-gradient(to bottom, #FFFFFF, #BAC8E0);
    z-index: 0;
    border-radius: 25px;
}
#iphone_nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    border-radius: 25px;
    background-color: #91A2CC;
    padding: 1vh 2vh;
}
#iphone_nav img {
    max-width: 3vh;
}
#iphone_nav a {
    display: block;
    margin-top: 1vh;
}
#iphone_content {
    width: 90%;
    position: absolute;
    max-height: 40%;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
#iphone_content form * {
    display: block;
    width: 80%;
    margin:0 auto;
    z-index: 10;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="iphone_container">
    <img src="images/body/Structure Iphone transparente.png" id="iphone" unselectable="on">
    <div id="iphone_screen">
        <img src="images/body/Contact.png" id="contact__iphone_picto">
        <div id="iphone_content">
            <form class="text-center">
                <label for="nom">Nom</label>
                <input type="text" name="nom">
                <label for="prenom">Prénom</label>
                <input type="text" name="prenom">
                <label for="Email">Email</label>
                <input type="email" name="email">
                <label for="telephone">Téléphone</label>
                <input type="tel" name="telephone">
            </form>
        </div>
        <nav class="d-flex text-center" id="iphone_nav">
            <div class="col-lg-4">
                <img src="images/body/Icone Accueil blanc.png">
                <a href="#">Accueil</a>
            </div>
            <div class="col-lg-4">
                <img src="images/body/Icone Plan blanc.png">
                <a href="#">Plan</a>
            </div>
            <div class="col-lg-4">
                <img src="images/body/Icone Contact blanc.png">
                <a href="#">Contact</a>
            </div>
        </nav>
    </div>
</div>