CSS absolute positioned elements make underneath inputs unclickable

Question

The HTML and CSS:

#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>

"Structure Iphone transparente.png" -> https://ibb.co/BKP0nTN

I'm designing a static iPhoneUI-like in pure CSS, everything is almost correctly placed, but the problem is that I can't click on my inputs or anything inside my #iphone_screen div (like the nav a). I know this is relative to z-indexes, I can solve it by lowering #iphone z-index, and increase #iphone_screen's one, but since this div has a background-color, the background-color just go onto the iPhone Structure img and we miss the point of building such a thing.

Any idea to solve this?

Answer 1

If you know the id/className of the element that is sitting atop of the input field(s), you can use the css property pointer-events:none to fix your problem.

You would place the pointer-events:none css directive on any element that blocks or partially blocks an underlying element - with the proviso that you will not then be able to click on those elements (the ones with pointer-events:none on them). Usually, those are h1 or p or div or etc that don't require user input, but be warned about this.

pointer-events:none tells the browser to pass any click events through the element to underlying elements. So, an overlay div that is 100vw/100vh will normally prevent users from interacting with anything underneath - but pointer-events:none will allow users to click buttons and enter inputs that would normally be blocked by the overlay.

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events