Question

我所做的是在页面底部创建了一个透明的div，它与页面底部的固定div大小相同。当用户向下滚动时，在网站内容的其余部分下显示固定的div。透明div位于固定div的前面，因此用户无法单击固定div上的输入框等。

将pointer-events: none;放在透明div上应允许用户点击它，但不幸的是，这还没有解决我的问题。我尝试制作透明和固定的div display: block或display: inline-block，但这些都没有解决我的问题。

＆＃13;

//empty transparent div
.section.empty-section {
  height: 459px;
  pointer-events: none;
  display: inline-block;
}

//contact form under the transparent div
.section.footer {
  background: #131313;
  position: fixed;
  bottom: 0;
  z-index: -1;
}

.section {
  position: relative;
  padding: 10 10 10 10;
  left: 0;
  width: calc(100% - 20px);
  color: white;
  font-family: "Gadugi";
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

＆＃13;

<div class="section empty-section"></div>
<div class="section footer">
  <span class="heading">Contact</span>
  <form action="contact.php" method="POST">
    <label>Your email address</label>
    <br>
    <input type="email" name="from-email-address">
    <br>
    <br>
    <label>Your name</label>
    <br>
    <input type="text" name="from-name">
    <br>
    <br>
    <label>Your message</label>
    <br>
    <textarea class="email-textbox" name="email-message"></textarea>
    <br>
    <button class="send-button">Send Email</button>
  </form>
</div>

＆＃13;

https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcf这是我网页的gif，底部的表单无法点击。

Answer 1

检查以下代码。我相信这就是你要找的东西。

＆＃13;

body{
    margin: 0;
}
.section.empty-section {
  height: 459px;
  display: block;
  z-index: 10;
  background: red;
  width: 100%;
}

.section.footer {
  background: #131313;
  position: fixed;
  bottom: 0;
  z-index: 1;
}

.section {
  position: relative;
  padding: 10 10 10 10;
  left: 0;
  width: calc(100% - 20px);
  color: white;
  font-family: "Gadugi";
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

＆＃13;

<div style="height: 1500px">
<div class="section empty-section"></div>
<div class="section footer">
  <span class="heading">Contact</span>
  <form action="contact.php" method="POST">
    <label>Your email address</label>
    <br>
    <input type="email" name="from-email-address">
    <br>
    <br>
    <label>Your name</label>
    <br>
    <input type="text" name="from-name">
    <br>
    <br>
    <label>Your message</label>
    <br>
    <textarea class="email-textbox" name="email-message"></textarea>
    <br>
    <button class="send-button">Send Email</button>
  </form>
</div>
</div>

＆＃13;

Answer 2

我得到了它的工作。我记得以前试过这个效果，所以我试图重新创建它，结果我上次使用了一个页脚标签而不是div用于联系表单所以我只是将它改为页脚并更改了类名等等现在它的工作原理。感谢。

pointer-events：none;不工作

2 个答案: