pointer-events: none; Not working

Question

What I have done is created a div at the bottom of my page that is transparent which is the same size as a fixed div at the bottom of the page. When the user scrolls down the fixed div is revealed under the rest of the website content. The transparent div is in front of the fixed div so the user is unable to click on the input boxes etc. on the fixed div.

Putting pointer-events: none; on the transparent div should allow the user to click through it but unfortunately this has not solved my issue. I tried making the transparent and fixed divs display: block or display: inline-block and neither of these fixed my issue.

//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;
}

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

https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcf This is a gif of my page, the form at the bottom isn't clickable.

This is probably just because you set the `z-index` to `-1`. The `body` and `html` elements are capturing your click events. — Joseph Marikle, Oct 24 '17 at 16:13
I set the pointer events to none though so i should just be able to click through the div right? — Adam Cole, Oct 24 '17 at 16:49
You are, but you're not clicking through `body` or `html`. Those elements capture the event and are above your form. The form is being set "below" `` and `` by the fact that they are `z-index: -1`. — Joseph Marikle, Oct 24 '17 at 18:02

izulito · Answer 1 · 2017-10-24T17:14:12.047

0

Check the code below. I believe that is what you are looking for.

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;
}

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

edited Oct 24 '17 at 17:14

answered Oct 24 '17 at 16:02

izulito

477
3
12

That didn't fix it, sorry – Adam Cole Oct 24 '17 at 16:06
So you want your form not to be clickable until you scroll down past the transparent div? – izulito Oct 24 '17 at 16:07
Correct, i just want the transparent div to have no pointer events but for some reason adding "pointer-events: none" does nothing. – Adam Cole Oct 24 '17 at 16:10
When you say pointer event what exactly do you mean? Cause in the code I sent you there is no pointer event on that transparent div and you cannot edit the form until you scroll past it. Or do you want to hide mouse cursor? – izulito Oct 24 '17 at 16:12
check the gyazo link i put in the main post, its a gif of me scrolling up and down the page, it should give you an idea of what you mean. Also pointer events controls if you can "click through" a div or not. – Adam Cole Oct 24 '17 at 16:31
Check my code, I edited it. It does exactly what you see on the gif you attached. – izulito Oct 24 '17 at 17:15

score -1 · Answer 2 · answered Oct 24 '17 at 17:24

I got it working. I remembered trying this effect previously so i tried to recreate it and it turns out i used a footer tag instead of a div for the contact form last time so i just changed it to a footer and changed the class names etc. and now it works. Thanks.

pointer-events: none; Not working

2 Answers2