CSS 绝对定位元素使输入下方不可点击答案

【问题标题】：CSS absolute positioned elements make underneath inputs unclickableCSS 绝对定位元素使输入下方不可点击
【发布时间】：2021-06-09 14:37:38
【问题描述】：

HTML 和 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>

“结构 Iphone transparente.png” -> https://ibb.co/BKP0nTN

我正在用纯 CSS 设计一个类似 iPhoneUI 的静态 UI，几乎所有内容都已正确放置，但问题是我无法点击我的输入或我的 #iphone_screen div 中的任何内容（如 nav a） . 我知道这与 z-indexes 相关，我可以通过降低 #iphone z-index 并增加 #iphone_screen 来解决它，但是由于这个 div 有背景色，所以背景色只是进入 iPhone 结构 img 和我们错过了构建这样一个东西的意义。

有办法解决这个问题吗？

【问题讨论】：

#iphone {pointer-events: none;} 可能会解决您的问题。
将 background-color 移动到另一个元素并更改 z-indexs
嘿@ww0k - 跟进。你的问题得到了满意的回答吗？如果我们可以提供更多帮助，请在任何答案下方添加评论，或编辑您的问题以澄清您还想知道什么。否则，请选择一个“最佳答案”（通过单击答案旁边的复选标记）结束问题。如果没有答案提供有用的信息，请添加您自己的答案并将其选为最佳答案（关闭问题）。也请记住：您可以投票任何您认为有帮助的答案（如果需要，您也可以投票并勾选相同的答案。）谢谢！
@ww0k 这个问题仍然悬而未决。请选择“最佳答案”（通过单击答案旁边的复选标记）以结束问题。如果没有答案提供有用的信息，请添加您自己的答案并将其选为最佳答案（关闭问题）。那会帮助我们。 谢谢！

标签： html css twitter-bootstrap z-index absolute

【解决方案1】：

如果您知道位于输入字段顶部的元素的 id/className，则可以使用 css 属性 pointer-events:none 来解决您的问题。

您可以将pointer-events:none css 指令放在任何阻止或部分阻止底层元素的元素上 - 附带条件是您将无法点击这些元素（带有pointer-events:none 的元素）他们）。通常，那些不需要用户输入的 h1 或 p 或 div 等，但请注意。

pointer-events:none 告诉浏览器将任何点击事件通过元素传递给底层元素。因此，100vw/100vh 的覆盖 div 通常会阻止用户与下面的任何内容进行交互 - 但pointer-events:none 将允许用户单击按钮并输入通常会被覆盖阻止的输入。

参考：

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

【讨论】：