ポインタイベント：なし; Not working

Question

私が行ったことは、ページの下部に固定divと同じサイズの透明な私のページの下部にdivを作成することです。ユーザーが下にスクロールすると、残りのウェブサイトコンテンツの下に固定divが表示されます。透過divは固定divの前にありますので、ユーザーは固定divの入力ボックスなどをクリックできません。

透明なdivにpointer-events: none;を置くと、ユーザーはそれをクリックすることができますが、残念ながらこれは私の問題を解決していません。透明で固定されたdivをdisplay: blockまたはdisplay: inline-blockにしてみましたが、どちらも問題を解決しませんでした。

//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これは下部のフォームがクリックできない、私のページのGIFです。

Answer 1

以下のコードを確認してください。私はそれがあなたが探しているものだと信じています。

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

私はそれが働いてしまいました。私は以前この効果を試してみたので、私はそれを再作成しようとしたと私はフッタタグを連絡先フォームの最後の時間の代わりにフッタタグを使用したので、私はちょうどフッタに変更し、クラス名などを変更した。ありがとう。