Zeiger-Ereignisse: keine; Funktioniert nicht

Question

Was ich getan habe, ist ein div am unteren Rand meiner Seite erstellt, die transparent ist, die die gleiche Größe wie eine feste div am unteren Rand der Seite hat. Wenn der Benutzer nach unten scrollt, wird das feste Div unter dem Rest des Website-Inhalts angezeigt. Das transparente div befindet sich vor dem festen div, so dass der Benutzer nicht auf die Eingabefelder usw. auf dem festen div klicken kann.

Putting pointer-events: none; auf dem transparenten div sollte der Benutzer durch klicken, aber leider hat dies mein Problem nicht gelöst. Ich habe versucht, die transparenten und festen Divs display: block oder display: inline-block und keiner von ihnen mein Problem behoben.

//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 Dies ist ein gif meiner Seite, an der Unterseite der Form ist nicht anklickbar.

Answer 1

Überprüfen Sie den folgenden Code. Ich glaube, das ist es wonach Sie suchen.

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>

Answer 2

Ich habe es funktioniert. Ich erinnerte mich daran, diesen Effekt zuvor zu versuchen, also habe ich versucht, es neu zu erstellen und es stellte sich heraus, dass ich ein Footer-Tag anstelle eines Div für das Kontaktformular beim letzten Mal verwendet habe, also habe ich es nur in eine Fußzeile geändert und die Klassennamen usw. geändert und jetzt funktioniert es . Vielen Dank.